我试图在向下滚动时使导航栏向上缩回，然后在向上滚动时再次出现，但它没有任何作用

Question

我对编写代码很陌生，但我见过这样做，我不明白为什么它什么都不做。问题可能出在CSS部分。

JavaScript

var navbar = document.getElementsByClassName("navbar");
var lastY = window.pageYOffset;
window.onscroll = function()
{
var currY = window.pageYOffset;
if (lastY > currY)
{
document.getElementsByClassName("navbar").style.top = "0";
}
else
{
document.getElementsByClassName("navbar").style.top = "-50px";
}
lastY = currY;
}

HTML-我不太确定为什么我要把所有的链接在他们单独的导航栏项目类div，但如果我不这样做，他们开始重叠的头(我希望导航栏有左边的名称和右边的链接)，也使页面的其他内容后导航栏消失。

<div class="navbar">
<h1>Квартална кръчма Тримата глупаци</h1>
<div class="navbar-items">
<div class="navbar-items"><a href="index.html">Home</a></div>
<div class="navbar-items"><a style="color:red;" href="Menu.html">Menu</a></div>
<div class="navbar-items"><a href="About_Us.html">About us</a></div>
<div class="navbar-items"><a href="Contact_Us.html">Contact us</a></div>
</div>
</div>

CSS

.navbar {
overflow: hidden;
position: fixed;
display: flex;
align-items: center;
justify-content: space-between;
background:#505d61;
z-index: 99;
padding: 10px;
height: 60px;
top: 0;
width: 100%;
box-shadow: 0 0 10px black;
}
.navbar-items {
overflow: hidden;
float:left;
display:block;
margin-left: 40px;
margin-right: 5px;
gap: 80px;
font-size: 21px;
font-weight: 550;
}
.navbar a{
color:black;
text-decoration: none;
}
.navbar a:hover{ 
color: white;
}

Answer 1

正如CBroe的评论所指出的那样，您的问题是您期望从document.getElementsByClassName("navbar")返回一个元素，但实际上您正在返回一个数组。要访问需要从数组中取出的元素，您可以像document.getElementsByClassName("navbar")[0]一样执行此操作。

因此将代码更新为

var lastY = window.pageYOffset;
window.onscroll = function(){
var currY = window.pageYOffset;
if (lastY > currY){
document.getElementsByClassName("navbar")[0].style.top = "0";
}
else{
document.getElementsByClassName("navbar")[0].style.top = "-50px";
}
lastY = currY;
}

应该可以解决这个问题。