我有一个粘性导航栏。当页面加载时，第一个 home div 会正确显示。但是，向下滚动然后向上滚动后，home div 中的一些内容被顶部的粘性导航栏隐藏了。我该如何解决这个问题？任何建议表示赞赏!
window.onscroll = () => {
myFunction()
};
const navbar = document.getElementById("navbar");
const sticky = navbar.offsetTop;
myFunction = () => {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky")
} else {
navbar.classList.remove("sticky");
}
}body {
padding: 0px;
margin: 0px;
}
#navbar {
overflow: hidden;
background-color: #000;
}
#navbar a {
float: right;
display: block;
text-align: center;
padding: 1vw;
text-decoration: none;
font-family: 'Muli', sans-serif;
font-size: 2.5vw;
font-weight: 400;
font-style: italic;
}
.color-nav a {
color: white;
}
.active {
background-color: #fff;
color: black !important;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
}
.main-section {
height: 45vw;
}<body>
<header>
<nav>
<div class='color-nav' id="navbar">
<a id='contact-link' href="#contact">Contact</a>
<a id="about-link" href="#about">About</a>
<a id='portfolio-link' href="#portfolio">Portfolio</a>
<a id='home-link' class="active" href="#home">Home</a>
</div>
</nav>
</header>
<section>
<div id='home-1' class="home main-section">
</div>
</section>
<section>
<div id="portfolio-1" class="portfolio main-section">
</div>
</section>
<section>
<div id="about-1" class='about main-section'>
</div>
</section>
<section>
<div id='contact-1' class='contact main-section'>
</div>
</section>
</body>最佳答案
问题是，当您滚动时，您将 fixed 的位置添加到 #navbar所以你把它从页面流中取出并固定在屏幕上。在这样做时，您将它从 <nav> 中取出。和 <header>这些元素现在的高度将为 0。如果你检查你的 #navbar使用 chrome 开发工具，您可以看到它有 31 像素高，至少在我的窗口中，它在您的窗口中可能会有所不同，因为您将其编码为在 vw 中有一个填充。如果你问我这不是一个很好的做法，所以你可能想重新考虑一下并在 px 中填充它。 , em , 或 rem所以一个简单的解决方法是只给父 div <header>或 <nav> 31px 的高度或任何你的导航栏高度，所以当你将导航栏从页面流中取出时，当它消失时你不会丢失导航高度，如下所示:
header{
height:31px;
}
这是一个片段:
window.onscroll = () => {
myFunction()
};
const navbar = document.getElementById("navbar");
const sticky = navbar.offsetTop;
myFunction = () => {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky")
} else {
navbar.classList.remove("sticky");
}
}body {
padding: 0px;
margin: 0px;
}
header{
height:31px;
}
#navbar {
overflow: hidden;
background-color: #000;
}
#navbar a {
float: right;
display: block;
text-align: center;
padding: 1vw;
text-decoration: none;
font-family: 'Muli', sans-serif;
font-size: 2.5vw;
font-weight: 400;
font-style: italic;
}
.color-nav a {
color: white;
}
.active {
background-color: #fff;
color: black !important;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
}
section{
height:100vh;
border:5px solid green;
} <header>
<nav>
<div class='color-nav' id="navbar">
<a id='contact-link' href="#contact">Contact</a>
<a id="about-link" href="#about">About</a>
<a id='portfolio-link' href="#portfolio">Portfolio</a>
<a id='home-link' class="active" href="#home">Home</a>
</div>
</nav>
</header>
<section>
<div id='home-1' class="home main-section">
</div>
</section>
<section>
<div id="portfolio-1" class="portfolio main-section">
</div>
</section>
<section>
<div id="about-1" class='about main-section'>
</div>
</section>
<section>
<div id='contact-1' class='contact main-section'>
</div>
</section>但是如果你只是想把你的导航栏放在页面的顶部无论如何没有理由有任何这个javascript你可以只添加填充到正文的顶部并给导航栏一个固定的位置.根本没有理由有任何这些滚动事件。添加像这样的 javascript 滚动事件是为了如果你的导航栏上方有一些东西并且你希望它在向下滚动页面后修复它。这是其中的一个片段:
body {
padding: 0px;
padding-top:31px;
margin: 0px;
}
nav{
position:fixed;
top:0;
width:100%;
}
#navbar {
overflow: hidden;
background-color: #000;
}
#navbar a {
float: right;
display: block;
text-align: center;
padding: 1vw;
text-decoration: none;
font-family: 'Muli', sans-serif;
font-size: 2.5vw;
font-weight: 400;
font-style: italic;
}
.color-nav a {
color: white;
}
.active {
background-color: #fff;
color: black !important;
}
section{
height:100vh;
border:5px solid green;
} <nav>
<div class='color-nav' id="navbar">
<a id='contact-link' href="#contact">Contact</a>
<a id="about-link" href="#about">About</a>
<a id='portfolio-link' href="#portfolio">Portfolio</a>
<a id='home-link' class="active" href="#home">Home</a>
</div>
</nav>
<section>
<div id='home-1' class="home main-section">
</div>
</section>
<section>
<div id="portfolio-1" class="portfolio main-section">
</div>
</section>
<section>
<div id="about-1" class='about main-section'>
</div>
</section>
<section>
<div id='contact-1' class='contact main-section'>
</div>
</section>关于javascript - 粘性导航栏在滚动到顶部时隐藏内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53475063/