滾動時使導航欄保留位置

我知道這個問題之前已經被問過了，但是我很確定在檢查出它們之後，沒有一個導航欄像這樣構建。滾動時使導航欄保留位置

我基本上無法讓導航欄在滾動到原來的位置之後「無縫地」切換到屏幕頂部的固定位置，然後再返回。

我已經包含的代碼，並且在這裏的一個示例：http://jsfiddle.net/r2a6U/

下面是實際的功能，這使得在div切換到固定位置模式：

var navPos = $('#navContainer').offset().top; 

$(window).scroll(function(){ 

    var fixIT = $(this).scrollTop() >= navPos; 

    var setPos = fixIT ? 'fixed' : 'relative' ; 
    var setTop = fixIT ? '0' : '600' ; 

    $('#navContainer').css({position: setPos}); 
    $('#navContainer').css({'top': setTop}); 

});

任何幫助，將不勝感激。

乾杯

來源

2013-04-10 Dan Mason

可以解決您的問題，除去樣式，而不是將它們設置爲relative和600px的。我建議你在JavaScript中添加/刪除一個類，然後應用固定的CSS。你將會得到更好更乾淨的JavaScript。

此外，請確保在修復問題時正確地將#navContainer居中。

jsFiddle

CSS

#navContainer.fixIT { 
    position:fixed; 
    top:0; 

    /* these will ensure it is centered so it doesn't jump to the side*/ 
    left:0; 
    right:0; 
    text-align:center; 
}

var navPos = $('#navContainer').offset().top; 
$(window).scroll(function(){ 
    var fixIT = $(this).scrollTop() >= navPos; 

    if (fixIT) 
     $('#navContainer').addClass('fixIT'); 
    else 
     $('#navContainer').removeClass('fixIT'); 
});

來源

2013-04-10 09:08:57

優秀感謝您了，先生，我這一個掙扎有一段時間！這也給了我一些關於jQuery的額外知識，可能在未來有用！ – 2013-04-10 09:14:10

NPS，每當我發現自己想在jQuery中使用'.css（）'時，我通常使用類來做它。 t忘記打勾來接受答案 – 2013-04-10 09:15:25

完成，完成。再次感謝！ – 2013-04-10 09:17:35

修復它在這裏：jsFiddle

只有小腳本更新：

var navPos = $（'＃navContainer'）。offset（）。top;

$（窗口）.scroll（函數（）{VAR = navContainer $（ '＃navContainer！'）;。
if($(this).scrollTop() >= navPos) { 
     // make it fixed to the top 
     $('#navContainer').css({ 'position': 'fixed', 'top': 0 }); 
    } else { 
     // restore to orignal position 
     $('#navContainer').css({ 'position': 'relative', 'top': 600 }); 
    } 
}); 

來源

2013-04-10 09:17:01

滾動時使導航欄保留位置

回答

相關問題