Html 固定导航栏隐藏时滚动

CSS有一个问题，因为我使用的是固定导航栏，应该与页面一起使用，但在这种情况下，当我滚动时，它只是隐藏了导航栏的一部分，如第二幅图所示：

.main\u导航{
显示：无；
位置：固定；
z指数：10；
宽度：100%；
高度：90px；
背景：黑色；
顶部：0！重要；
}
.main_nav ul{
利润上限：17像素；
文字装饰：无；
}

$（文档）.ready（函数（）{
$（窗口）。滚动（函数（）{
如果（$（document.scrollTop（）>90）{
$（“.main_nav”）.slideDown（）；
}否则{
$（“.main_nav”）.slideUp（）；
}
});
});

以下是我的一个工作示例：

---

如果我理解正确，那么我可以根据提供的提琴回答你。首先，您需要向标头添加一个ID

<div style="background-color: black; width: 100%; margin: 0px; position:fixed; top:0; width:100%; z-index:100" id="header">
    <button class="button button1">SOMETHING</button>
</div>

javascript应该如下所示

var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
    var currentScrollPos = window.pageYOffset;
    if (prevScrollpos > currentScrollPos) {
        document.getElementById("header").style.top = "0";
    } 
    else {
        document.getElementById("header").style.top = "-50px";
    }
    prevScrollpos = currentScrollPos;
}

---

我的猜测是，这只是一个没有工作示例的猜测，这是一个奇怪的交互，没有显示。如果你想要一个向下滑动的效果，你可以用平移Y来隐藏和显示它

window.addEventListener（'scroll'，（）=>{
如果（window.scrollY>100）{
document.querySelector（'nav'）.classList.add（'scroll'））
}否则{
document.querySelector（'nav'）.classList.remove（'scroll'））
}
})

正文{
保证金：0；
填充：0；
高度：150vh；
背景：线性渐变（蓝色、绿色）；
}
导航{
高度：90px；
宽度：100%；
位置：固定；
背景：黑色；
转换：translatey（-90px）；
过渡：全部轻松进出。5s；
z指数：2；
}
.卷轴{
变换：translatey（0px）；
}

---

你可以发布你的html吗？为什么你使用

显示：无？可能是你的问题html会很有帮助，因为根据你的css，你的主导航根本不应该显示；之所以使用，是因为我使用JS在滚动100px后显示导航栏，但这不是问题所在。在这种情况下，我们可以看到您的JS和html吗？
#header {
   transition: top 0.3s;
}

var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
    var currentScrollPos = window.pageYOffset;
    if (prevScrollpos > currentScrollPos) {
        document.getElementById("header").style.top = "0";
    } 
    else {
        document.getElementById("header").style.top = "-50px";
    }
    prevScrollpos = currentScrollPos;
}