jQuery淡入或動畫當滾動過去的某個點

所以我有一個導航的地方在我的標題，當用戶滾動通過導航我想最小化和淡入或作爲一個固定的導航回到頁面頂部，我使用下面的jquery代碼工作，但問題是它使用css完成這項工作，如果我嘗試用動畫替換它，它會不斷重複它傳遞的每個像素。jQuery淡入或動畫當滾動過去的某個點

這裏是代碼：

function fixDiv() { 

var $cache = $('.stickynav'); 
if ($(window).scrollTop() > 127) 

$cache.css({'position': 'fixed','top': '0px','height': '40px'}), 
$('#logo img').css({'height': '30px', 'position': 'relative', 'bottom': '10px'}), 
$('#main_menu_container').css({'bottom': '40px'}); 

else          
$cache.css({'position': 'relative','top': '0px', 'height': 'auto'}), 
$('#logo img').css({'height': 'auto', 'position': 'auto', 'bottom': 'auto'}), 
$('#main_menu_container').css({'bottom': 'auto'}); 
} 

$(window).scroll(fixDiv); 
fixDiv();

Here is a live jsfiddle

來源

2013-08-17 Sohail

你可以在http://jsfiddle.net/ –

上做一個工作演示剛剛添加到問題 – Sohail

你想動畫 –

嘗試

jQuery(function(){ 
    var isfxd = false, $cache = $('.stickynav'), $ct = $('#main_menu_container'), $img = $('#logo img'); 

    function fixDiv() { 
     var shdfxd = $(window).scrollTop() > 127; 

     if (shdfxd && !isfxd) { 
      isfxd = true; 

      $cache.finish().css({'position': 'fixed'}).animate({'top': '0px','height': '40px'}); 
      $img.css({'height': '30px', 'position': 'relative', 'bottom': '10px'}); 
      $ct.css({'bottom': '40px'}); 
     } else if(isfxd && !shdfxd) { 
      isfxd = false; 

      $cache.finish().css({'position': 'relative','top': '0px', 'height': 'auto'}); 
      $img.css({'height': 'auto', 'position': 'auto', 'bottom': 'auto'}); 
      $ct.css({'bottom': 'auto'}); 
     } 
    } 
    $(window).scroll(fixDiv); 
    fixDiv(); 
});

演示：Fiddle

注意光潔度（）只能在jQuery的1.9和更高

來源

2013-08-17 09:34:32

jQuery淡入或動畫當滾動過去的某個點

回答

相關問題