JQuery縮小基於滾動速度的固定菜單動畫速度？

我得到了一個固定的菜單，即收縮上滾動，使用下面的代碼：http://jsfiddle.net/JJ8Jc/913/JQuery縮小基於滾動速度的固定菜單動畫速度？

但我想動畫/收縮速度遵循像素滾動速度像素，就像你在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); 
    } 
} 
});

來源

2014-02-08 Ralph

好吧，我能得到完全相同的固定菜單的效果，作爲展開主題看出，通過改裝意味着通過調整大小DIV一些jQuery代碼滾動。併爲#header_nav類添加最小高度的CSS值。

這裏是展示在行動代碼的小提琴鏈接：http://jsfiddle.net/JJ8Jc/919/

提示重新菜單透明度：如果你想重建展開菜單的透明度，只需使用一個重複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 used：

<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>

來源

2014-02-10 11:41:38 Ralph

JQuery縮小基於滾動速度的固定菜單動畫速度？

回答

相關問題