為什么滾動時我的導航條的高度消失了？

Question

我正在嘗試使用JavaScript構建帶有粘性導航欄的網站。 對於頁面的第一次加載，一切正常。 但是，當我滾動時，導航欄閃爍，然后身體向上（參見圖片）。 我不知道為什么

在導航欄之后，我有幻燈片放映，因此，圖片被導航欄剪切，因此我位於頁面頂部。

參見下面我的代碼...

 /*sticky_navbar*/ window.onscroll = function() { myFunction() }; var navbar = document.getElementById("header"); var sticky = navbar.offsetTop; function myFunction() { if (window.pageYOffset >= sticky) { navbar.classList.add("sticky") } else { navbar.classList.remove("sticky"); } } 

 @charset "UTF-8"; /* CSS Document */ body { margin: 0; font-size: 28px; background-color: #00011f; display: flex; flex-direction: column; margin: auto; } /* Style the navbar */ #header { display: flex; justify-content: flex-end; background: rgba(139, 139, 157, 1); z-index: 2; } #Title { margin: 0 auto 0 0; height: 20px; margin-top: 20px; padding-left: 10px; border-bottom: 1px solid white; padding-top: 10px; padding-bottom: 35px; flex: 1; } #navbar { overflow: hidden; background: rgba(139, 139, 157, 0); display: flex; justify-content: flex-end; border-bottom: 5px solid white; padding-bottom: 20px; padding-top: 20px; } .menu:nth-child(1) { order: 1; } .menu:nth-child(2) { order: 4; } .menu:nth-child(3) { order: 3; } .menu:nth-child(4) { order: 2; } .menu:nth-child(5) { order: 5; } IMG.background { display: block; margin-left: auto; margin-right: auto; z-index: 1; width: 60%; } #navbar a { display: block; color: #FFF; text-align: center; padding: 10px 16px; text-decoration: none; font-size: 17px; } #navbar a:hover { background-color: #ddd; color: black; } #navbar a.active { background: rgba(217, 78, 68, 0.5); color: white; } .content { padding: 16px; color: #ddd; background-color: #FFF } .sticky { position: fixed; top: 0; width: 100%; } .sticky+.content { padding-top: 60px; } /*END NAVBAR*/ #display { display: flex; } 

 <div id="header"> <div id="Title"> <a href="Accueil"><img src="IMAGES/PNG/logo.png" alt="logo" /></a> </div> <div id="navbar"> <div class="menu"> <a class="active" href="javascript:void(0)">Blog</a></div> <div class="menu"> <a href="blog">Contact</a></div> <div class="menu"> <a href="blog">L'électrophotonique</a></div> <div class="menu"> <a href="blog">Qui sommes nous?</a></div> </div> </div> <div class="content"> <h3>Sticky Navigation Example</h3> </div> 

Answer 1

身體跳到另一個位置，因為導航欄的高度至少為86px，但是您給.sticky + .content僅填充了60px的填充頂部。

也許您可以使用position: sticky; 代替？ https://caniuse.com/#feat=css-sticky

要么

為了防止閃爍，請在導航欄上設置固定的位置

#navbar {
  overflow: hidden;
  background: rgba(139, 139, 157, 0);
  display: flex;
  justify-content: flex-end;
  border-bottom: 5px solid white;
  padding-bottom: 20px;
  padding-top: 20px;
  position: fixed;
  top: 0;
  width: 100%;
}
.content {
  padding: 60px 16px 16px 16px;
  color: #ddd;
  background-color: #FFF
}