作为一个脚本新手，我希望在这个问题上得到帮助：我希望我的导航条（#header-menu）在我的主页加载时被隐藏。在向下滚动一点（500px）后，我想让它显示出来。脚本的工作原理是，除了在到达主页时显示导航条，在向下滚动和向下滚动时导航条消失。当向下滚动时，它就消失了，然后又按原样出现。但问题是，当到达主页时，它并没有被默认隐藏（例如，当点击标志时）。
<header>
<div id="header-content">
<a href="index.php#toppage"><img src="images/Logo.png" alt="" style="float:left"></a>
<a href="index.php#toppage"><img src="images/Logo2.png" alt="" style="float:right"></a>
</div>
<ul id="header-menu" class="grid-4">
<li><a href="#menu-item-1" class="page-scroll menu-item-blue">menu-item-1</a></li>
<li><a href="#menu-item-2" class="page-scroll menu-item-blue">menu-item-2</a></li>
<li><a href="#menu-item-3" class="page-scroll menu-item-blue">menu-item-3</a></li>
<li><a href="#menu-item-4" class="page-scroll menu-item-blue">menu-item-4</a></li>
</ul>
</header>
<script>
window.onscroll = function() {hidemenu()};
function hidemenu() {
var element = document.getElementById("header-menu");
if (document.body.scrollTop > 500 || document.documentElement.scrollTop > 500) {
element.classList.remove("hidden");
} else {
element.classList.add("hidden");
}
}
</script>
我想事实上我正在寻找一个替代 "onscroll "的方法。我不想在用户滚动时触发导航条的隐藏显示，我想让它根据位置的不同进行隐藏显示。另外，当用户在其他页面上时，导航条也应该被显示。这个hidingshowing只适用于主页。
<script>
var element = document.getElementById("header-menu");
window.addEventListener("load",()=>{
element.classList.add("hidden");
})
window.onscroll = function() {hidemenu()};
function hidemenu() {
if (document.body.scrollTop > 500 || document.documentElement.scrollTop > 500) {
element.classList.remove("hidden");
} else {
element.classList.add("hidden");
}
}
</script>
如果你想在页面加载时隐藏(或)，可以这样做。隐藏在首页 并在其他地方可见，你可以使用
<body onload="hide-nav()">
....
</body>
<script>
var element = document.getElementById("header-menu");
hide-nav=()=>{
element.classList.add("hidden");
}
window.onscroll = function() {hidemenu()};
function hidemenu() {
if (document.body.scrollTop > 500 || document.documentElement.scrollTop > 500) {
element.classList.remove("hidden");
} else {
element.classList.add("hidden");
}
}
</script>