导航栏固定在滚动后如何阻止内容跳转？

Question

我有一个导航栏，位于着陆页下方约 1/3 处，一旦用户滚动到导航栏，它就会变得粘滞并固定在顶部。

我遇到的问题是一旦脚本启动并且导航栏变得粘滞，它下面的内容就会跳起来，被新修复的导航栏部分隐藏。

我希望这是一个平稳的过渡，但这个小小的跳跃令人不安。

关于如何解决这个问题的任何想法？

 $(function() { var distance = $('.desktop-nav').offset().top, $window = $(window); $window.scroll(function() { $('.desktop-nav').toggleClass('fixedtop', $window.scrollTop() >= distance) }); });

 ul { text-align: center; padding-top: 20px; padding-bottom: 15px; padding-left: 0; background-color: white; }.fixedtop { position: fixed; top: 0; width: 100%; background-color: white; height: 50px; box-shadow: 0 5px 60px rgba(0,0,0,0.08); margin-top: 0px; } #portfolio {height: 200vh;}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="desktop-head"> <img class="desktop-logo" src="img/logo.png" alt=""> <ul class="desktop-nav"> <li><a href="index.html" class="active">PORTFOLIO</a></li> <li><a href="#">ABOUT ME</a></li> <li><a href="#">RESUME</a></li> <li><a href="#">CONTACT</a></li> </ul> </div> <div id="portfolio"></div>

Answer 1

尝试这个，

 $(function() { var distance = $('.desktop-nav').offset().top, $window = $(window); $window.scroll(function() { var dh = $('.desktop-nav').height(); $('.desktop-nav').toggleClass('fixedtop', $window.scrollTop() >= distance, "easeOutSine"); if($('.desktop-nav').hasClass('fixedtop')){ $('body').css('margin-top', dh+dh ); }else{ $('body').css('margin-top', 0 ); } }); });

 body{ margin:0; } ul { text-align: center; padding-top: 20px; padding-bottom: 15px; padding-left: 0; background-color: white; }.fixedtop { position: fixed; top: 0; width: 100%; background-color: white; /* height: 50px; */ box-shadow: 0 5px 60px rgba(0,0,0,0.08); margin-top: 0px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="desktop-head"> <img class="desktop-logo" src="img/logo.png" alt=""> <ul class="desktop-nav"> <li><a href="index.html" class="active">PORTFOLIO</a></li> <li><a href="#">ABOUT ME</a></li> <li><a href="#">RESUME</a></li> <li><a href="#">CONTACT</a></li> </ul> </div> <div id="portfolio"> <pre> stackoverflow stackoverflow stackoverflow stackoverflow stackoverflow stackoverflow stackoverflow stackoverflow stackoverflow stackoverflow stackoverflow stackoverflow stackoverflow stackoverflow stackoverflow stackoverflow stackoverflow stackoverflow stackoverflow stackoverflow stackoverflow stackoverflow stackoverflow stackoverflow stackoverflow stackoverflow stackoverflow stackoverflow </pre> </div>

Answer 2

这里有几个选项。

首先，根据您的支持要求，您可以简单地在相关元素上使用 position:sticky。 这回退到 position:relative 在不受支持的浏览器上。 如果您选择这条路线，您将不需要固定顶部 class。

其次，您可以继续使用相同的方法，只是 position navbar 绝对在其父级上，并在父级上设置一个 padding-top，这样内容就不会跳转。 当元素变得粘性时，填充将保留其他内容 position。