Javascript 使导航栏在滚动时保持位置

我知道以前有人问过这个问题，但我很确定在检查完之后，没有一个导航栏是像这个一样构建的

我基本上很难让导航栏在滚动过其原始位置后“无缝”切换到屏幕顶部的固定位置，然后再返回

我在这里包括了代码和一个示例：

以下是使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});

});

任何帮助都将不胜感激

---

干杯

您可以解决问题，删除样式，而不是将其设置为

相对

和

600px

。我建议您在JavaScript中添加/删除一个类，然后应用固定的CSS。您最终将获得更好、更干净的JavaScript

此外，还应确保在固定后正确居中放置

#navContainer

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

JS

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

在这里修复它：

只有一个小脚本更新：

var navPos=$（'#navContainer'）.offset（）.top

$（窗口）。滚动（函数（）{ var navContainer=$（“#navContainer”）

---

太好了！非常感谢您，先生。我在这方面努力了一段时间！这也给了我一些关于jQuery的额外知识，这些知识将来可能会用到！Nps，每当我发现自己想在jQuery中使用

.css（）

时，我通常都是使用类来完成的。别忘了点击勾号来接受答案