Question

基本上我有一个导航栏，当用户开始滚动时会变得固定，一些过渡的东西会继续，以使它看起来不错。

我的问题是，当我的导航栏变得固定时，整个页面会跳起来，因为导航栏被拉出“堆栈”，这意味着当scroll >= 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');
    }
})

我的导航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>

静态导航到固定导航，导致页面“跳转”

0 个答案: