Javascript 滚动到顶部时，粘性导航栏会隐藏内容

我有一个粘糊糊的导航条。加载页面时，第一个

home

div将正确显示。但是，在向下滚动然后进行备份后，

home

div中的一些内容被顶部的粘性导航条隐藏。如何修复此行为？任何建议都将不胜感激

window.onscroll=（）=>{
myFunction（）
};
const navbar=document.getElementById（“navbar”）；
常数sticky=navbar.offsetTop；
myFunction=（）=>{
如果（window.pageYOffset>=粘性）{
navbar.classList.add（“粘性”）
}否则{
navbar.classList.remove（“粘性”）；
}
}

正文{
填充：0px；
边际：0px；
}
#导航栏{
溢出：隐藏；
背景色：#000；
}
#导航栏a{
浮动：对；
显示：块；
文本对齐：居中；
填充物：1vw；
文字装饰：无；
字体系列：“Muli”，无衬线；
字体大小：2.5vw；
字体大小：400；
字体：斜体；
}
.彩色导航a{
颜色：白色；
}
.主动{
背景色：#fff；
颜色：黑色！重要；
}
.粘的{
位置：固定；
排名：0；
宽度：100%；
}
.主要部分{
高度：45vw；
}

---

不会留下间隙，因此它所覆盖的空间将由于相对行为而被其他元素占用。您需要使用与导航高度大小相同的边距或填充来推送内容。

问题是，当您滚动时，您正在将固定位置添加到

#navbar

，因此您将其从页面流中取出并固定到屏幕上。执行此操作时，您将其从

和

中取出，这些元素的高度现在将为0。如果你用chrome开发工具检查你的

#navbar

，你可以看到它有31px高，至少在我的窗口中，它在你的窗口中可能会有所不同，因为你在

vw

中对它进行了编码，如果你问我这不是一个很好的做法，那么你可能想重新考虑一下，在

px

，

em

中对它进行填充，或者

rem

所以一个简单的解决方法就是只给父div一个31px的高度，或者

一个导航条的高度，或者不管您的导航条高度是多少，这样当您将导航条从页面流中取出时，当导航条消失时，您就不会丢失导航高度，如下所示：

header{
  height:31px;
}

下面是一个片段：

window.onscroll=（）=>{
myFunction（）
};
const navbar=document.getElementById（“navbar”）；
常数sticky=navbar.offsetTop；
myFunction=（）=>{
如果（window.pageYOffset>=粘性）{
navbar.classList.add（“粘性”）
}否则{
navbar.classList.remove（“粘性”）；
}
}

正文{
填充：0px；
边际：0px；
}
标题{
高度：31px；
}
#导航栏{
溢出：隐藏；
背景色：#000；
}
#导航栏a{
浮动：对；
显示：块；
文本对齐：居中；
填充物：1vw；
文字装饰：无；
字体系列：“Muli”，无衬线；
字体大小：2.5vw；
字体大小：400；
字体：斜体；
}
.彩色导航a{
颜色：白色；
}
.主动{
背景色：#fff；
颜色：黑色！重要；
}
.粘的{
位置：固定；
排名：0；
宽度：100%；
}
部分{
高度：100vh；
边框：5px纯绿色；
}

我需要将

window.pageYOffset>=sticky

更改为

window.pageYOffset>sticky

，因为在滚动到顶部时类没有被删除。

我尝试过在顶部div中添加填充，但是当页面加载时，我有一个超大的div，因为填充是可见的。只有在我开始滚动之后，导航才会切断div的顶部。为什么不在sticky类中保持填充呢？当通过javascript删除粘性类时，它将在添加和删除粘性类后应用。我同意你的观点，我认为这是解决这个问题的最佳答案。

header{
  height:31px;
}