javascript - 滚动时使导航栏保持位置

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');
});