Bootstrap：在滚动时向导航栏添加/删除固定位置答案

【问题标题】：Bootstrap : add / remove fixed position to navbar on scrollBootstrap：在滚动时向导航栏添加/删除固定位置
【发布时间】：2023-03-29 05:00:01
【问题描述】：

我正在尝试通过在 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 然后将其删除，但由于某种原因，它为整个页面添加了闪烁效果，所以我改用定位

【问题讨论】：

标签： jquery twitter-bootstrap css

【解决方案1】：

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

【讨论】：