Jquery 静态导航到固定导航，导致页面变为；“跳跃”；

基本上，我有一个导航栏，当用户开始滚动时，它会变得固定，并进行一些转换，以使它看起来更漂亮

我的问题是，当我的导航栏被修复时，整个页面会跳起来，因为导航栏被从“堆栈”中拉出，这意味着当

滚动>=100

时，页面会向顶部做一个小的“跳跃”

显然，我不希望我的页面在滚动时出现故障，那么如何以最“正确”的方式解决这个问题呢

一种解决方案是在静态导航栏后面制作一个不可见的div，以填充空间。不过，这需要我猜测导航栏的高度。同样，调整页面大小时，此高度也会改变。-因此，在我看来，这不是一个好的解决办法

我的jQuery：

$(window).scroll(function () {
   var scroll = $(window).scrollTop();

   if (scroll >= 100 && scroll < 200) 
   {
       $("#navbar").css({ "top": "-100px", "transition": "0.5s ease"});
       $("#navbar").removeClass('navbar-static-top');
   }

   else if (scroll >= 200)
   {
       $("#navbar").addClass('navbar-fixed-top');
       $("#navbar").css("top", "0px");
   }
   else if (scroll < 50) 
   {
       $("#navbar").css({ "top": "0px", "transition": "0s ease" });
       $("#navbar").addClass('navbar-static-top');
       $("#navbar").removeClass('navbar-fixed-top');
    }
})

$（窗口）。滚动（函数（）{
var scroll=$（窗口）.scrollTop（）；
如果（滚动>=100&&滚动<200）
{
$（“#navbar”）.css（{“top”：“-100px”，“transition”：“0.5s ease”}）；
$（“#navbar”）.removeClass（'navbar-static-top'）；
}
否则如果（滚动>=200）
{
$（“#navbar”）.addClass（'navbar-fixed-top'）；
$（“#navbar”）.css（“top”，“0px”）；
}
否则如果（滚动<50）
{
$（“#navbar”）.css（{“top”：“0px”，“transition”：“0s ease”}）；
$（“#navbar”）.addClass（'navbar-static-top'）；
$（“#navbar”）.removeClass（'navbar-fixed-top'）；
}
})

我的导航html：

<nav class="navbar navbar-inverse navbar-static-top" id="navbar" style="margin-bottom:0px;">
    <div class="container">
        <ul class="navbar navbar-nav">
            <li><a href="#">Home</a></li>
            <li><a href="#">Home</a></li>
        </ul>
    </div>
</nav>

当您固定导航时，将padding top添加到navGood解决方案大小的主体中，但这需要我猜测导航条的高度，因为高度设置为“自动”。您不必猜测，只需使用jquery获取计算出的高度即可。你也应该考虑一下浏览器的大小，我会的！我们在这里看这个例子：我可以看到他们也这么做！