滚动时使导航栏保持位置

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