Javascript 正文滚动时隐藏固定标题

我有一个固定的标题，我想它消失时，身体滚动和重新出现时，身体滚动在顶部

如果主体卷轴的高度超过收割台的高度，则收割台消失；反之，如果主体卷轴的高度小于收割台的高度，则收割台出现

不必使用jquery，而是使用JavaScript

这是我的密码：

html{
身高：100%；
溢出：隐藏；
宽度：100%；
}
身体{
显示：表格；
身高：100%；
保证金：0；
填充：0；
宽度：100%；
}
正文>div{
显示：表格行；
}
正文>*>*{
显示：表格单元格；
身高：100%；
宽度：100%；
}
标题{
背景：红色；
高度：80px；
字号：20pt；
}
#场地{
身高：100%；
位置：相对位置；
宽度：100%；
}
#站点>分区{
身高：100%；
溢出：自动；
位置：绝对位置；
宽度：100%；
}
p{
背景：蓝色；
高度：50em；
边缘：1米；
填充：.5em；
宽度：20em；
}

不受滚动条影响的标题
只是一个蓝色的大框来生成一个滚动条

不受滚动条影响的标题
只是一个蓝色的大框来生成一个滚动条

---

试试这个

我刚刚添加了条件

currentScrollPos<10

，以防止用户返回顶部时打开导航栏

var-prevScrollpos=window.pageYOffset；
window.onscroll=函数（）{
var currentScrollPos=window.pageYOffset；
如果（prevScrollpos>currentScrollPos&¤tScrollPos<10）{
document.getElementById（“navbar”）.style.top=“0”；
}否则{
document.getElementById（“navbar”）.style.top=“-50px”；
}
prevScrollpos=当前ScrollPos；
}

正文{
保证金：0；
背景色：#f1f1；
字体系列：Arial、Helvetica、无衬线字体；
}
#导航栏{
背景色：#333；
位置：固定；
排名：0；
宽度：100%；
显示：块；
过渡：前0.3名；
}
#导航栏a{
浮动：左；
显示：块；
颜色：#F2F2；
文本对齐：居中；
填充：15px；
文字装饰：无；
字号：17px；
}
#导航栏a：悬停{
背景色：#ddd；
颜色：黑色；
}

此示例演示如何在用户开始滚动页面时隐藏导航栏

向下滚动此帧以查看效果

向上滚动以显示导航栏

Lorem ipsum door dummy text sit amet，concetetur adipiscing elit，sed do eiusmod temporal incident ut laboure and dolore magna aliqua。但是，在最低限度上，我们需要一个实验室来进行日常工作。两人或两人在一个无教区的房间里互相指责。除偶尔因疏忽而死亡外，不得因疏忽而导致动物死亡

Lorem ipsum door dummy text sit amet，concetetur adipiscing elit，sed do eiusmod temporal incident ut laboure and dolore magna aliqua。但是，在最低限度上，我们需要一个实验室来进行日常工作。两人或两人在一个无教区的房间里互相指责。除偶尔因疏忽而死亡外，不得因疏忽而导致动物死亡

基于此答案：。您可以创建脚本，在向下滚动时将

标题的
高度
更改为
0
。

动画作为奖励

注意，我必须添加
display:block；溢出：隐藏到您的
标题


让lastScrollTop=0；
让高度=80
const header=document.querySelector（'header'）；
document.querySelector（“#site>div”）.addEventListener（'scroll'，（e）=>{
const st=e.target.scrollTop；
nextHeight=80；
如果（st>lastScrollTop）{
nextHeight=0；
}
lastScrollTop=st div{
显示：表格行；
}
正文>*>*{
显示：表格单元格；
身高：100%；
宽度：100%；
}
标题{
背景：红色；
高度：80px；
字号：20pt；
显示：块；
溢出：隐藏；
}
#场地{
身高：100%；
位置：相对位置；
宽度：100%；
}
#站点>分区{
身高：100%；
溢出：自动；
位置：绝对位置；
宽度：100%；
}
p{
背景：蓝色；
高度：50em；
边缘：1米；
填充：.5em；
宽度：20em；
}

不受滚动条影响的标题
只是一个蓝色的大框来生成一个滚动条

Hi-这篇来自的简单教程可以解决您的问题。当然，您仍然需要添加逻辑来隐藏导航栏，直到您回到顶部。这对您有帮助吗？
<div id="site">
  <div>
     <header>A header unaffected by scrollbar</header>
    <p>Just a big blue box to generate a scrollbar.</p>
  </div>
</div>