为什么滚动时我的导航条的高度消失了？

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
}