導航欄固定在滾動后如何阻止內容跳轉？

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。