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;

$（窗口）.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 });
    }
});

滚动时使导航栏保持位置

2 个答案: