JQuery усаживает фиксированное меню скорости анимации на основе скорости прокрутки?

Question

мне удалось получить фиксированное меню, что сокращает на свитке, используя следующий код: http://jsfiddle.net/JJ8Jc/913/

Но я хотел бы анимацию/термоусадочную скорость следовать пикселям скорости прокрутки пикселя, так же, как вы видите, в WP Тема Enfold: http://www.kriesi.at/themes/enfold/ Итак, когда пользователь только прокручивает 5 пикселей сверху, меню сокращается на 5 пикселей. И когда пользователь прокручивает 5 пикселей, меню увеличивается на 5 пикселей по высоте.

Возможно ли это с помощью кода анимации, который я использую сейчас? Или нужен другой подход?

Код настоящее время я использую:

$(function(){ 
    $('#header_nav').data('size','big'); 
}); 

$(window).scroll(function(){ 
if($(document).scrollTop() > 0) 
{ 
    if($('#header_nav').data('size') == 'big') 
    { 
     $('#header_nav').data('size','small'); 
     $('#header_nav').stop().animate({ 
      height:'40px' 
     },600); 
    } 
} 
else 
{ 
    if($('#header_nav').data('size') == 'small') 
    { 
     $('#header_nav').data('size','big'); 
     $('#header_nav').stop().animate({ 
      height:'100px' 
     },600); 
    } 
} 
}); 

Answer 1

Хорошо, я был в состоянии получить тот же самый эффект фиксированного меню, как показано в теме развернутся, с помощью моддинга некоторые JQuery код означало для изменения размера DIV через прокрутки. И добавление значения CSS min-height в класс #header_nav.

Вот ссылка скрипки показывая код в действии: http://jsfiddle.net/JJ8Jc/919/

TIP повторно прозрачность меню: В случае, если вы хотели бы восстановить прозрачность меню развернется, просто использовать повтор 1px * 1px PNG (с прозрачностью около 90% -95%) в качестве фона #header_nav. Использование CSS для этого также возможно, но это также сделает ваш логотип и элементы меню прозрачными.

В случае, если кто знает лучшего решения, я все же хотел бы услышать об этом :)

В JQuery:

$(document).ready(function(){ 
    $(window).scroll(function() { 
     var $myDiv = $('#header_nav'); 
     var OriginalHeight = '100'; 
     var st = $(this).scrollTop(); 
     $myDiv.height(OriginalHeight - st); 
    }).scroll(); 
}); 

CSS-:

body { 
    height:1000px; 
    width:100%; 
    background-color:#F0F0F0; 
} 

#header_nav { 
    width:100%; 
    height:100px; 
    min-height:40px; 
    background-color:#666; 
    position:fixed; 
    top:0; 
    left:0; 
} 
#header_nav img { 
    height:100%; 
} 

#content_wrapper { 
    width:100%; 
    height:500px; 
    padding-top:100px; 
} 

Пример HTML использовано:

<div id="header_nav"><img src="http://www.kriesi.at/themes/wp-content/plugins/avia_cachable_style_switch/images/logo-enfold/splash-orange.png"/></div> 
<div id="content_wrapper">Just some content.</div>