jquery - Bootstrap : add/remove fixed position to navbar on scroll

Question

我试图通过在 navbar-default 滚动时将位置固定顶部添加到 0 来将导航栏固定在顶部，并在向上滚动时将导航栏放回相同位置(前 300)，

下面是我的代码

var height = jQuery('.navbar-default').offset().top;
$(window).scroll(function() {


var scroll = $(window).scrollTop();
    if(scroll>height) {
        $('.navbar-default').css({position: 'fixed', top: '0px',left:'0px',right:'0px','z-index':'9999999999999999'});
        } else if(scroll<height){ 
// below i want to right code to position navbar to its original position   
      $('.navbar-default').css({position: 'relative', top: height,left:'0px',right:'0px','z-index':'9999999999999999'});
        }   

});

我不确定，否则如果部分代码是正确的，因为如果我向上滚动导航栏会消失，请告知我该如何解决这个问题。谢谢

编辑:我尝试在滚动条上添加 navbar-fixed-top，然后将其删除，但由于某种原因，它给整个页面增加了闪烁效果，所以我改用定位

Answer 1

如果“闪烁”是指导航栏下方的元素跳起来填补空白，解决方案是将导航栏放置在固定高度(导航栏的高度)元素内，如 <div> .发生这种情况的原因是，当您修复导航栏时，它会从页面流中移除，而其他元素会向上移动以填补空白。这就是为什么需要固定高度的 parent 。这样你就可以使用 .navbar-fixed-top .
我在您的代码中看到的问题是，当您将位置设置回相对位置时，您将顶部设置为高度。相对定位的元素是相对于它们在页面上的位置而不是文档或视口(viewport)定位的，因此您需要将其设置为 0。
你也不需要把if在 else 之后.