滾動時使導航欄保持位置

Question

我知道之前曾有人問過這個問題，但是我很確定在檢查了它們之后，沒有一個導航欄像這樣構建。

在滾動超過其原始位置然后再次返回時，我基本上無法使導航欄“無縫”切換到屏幕頂部的固定位置。

我已經包含了代碼，並在此處提供了示例： 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});

});

任何幫助將非常感激。

干杯

Answer 1

您可以解決問題以刪除樣式，而不是將樣式設置為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;
}

JS

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

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

Answer 2

在這里修復： jsFiddle

只是一個小的腳本更新：

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

$（window）.scroll（function（）{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 }); } });