[英]I'm trying to make my navbar retract upwards when I scroll down and then appear again when I scroll up, but it doesn't do anything
I'm very new to writing code but I've seen this done the same way, I don't get why it does nothing.我对编写代码非常陌生,但我看到它以同样的方式完成,我不明白为什么它什么都不做。 The issue is likely somewhere in the CSS part.
问题可能在 CSS 部分的某个地方。
JavaScript 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- I'm not exactly sure why I have to put all the links in their separate navbar-items class divs, but if I don't do this they start overlapping the header (i want the navbar to have that name on the left and the links on the right) and also make the other contents of the page after the navbar vanish. 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 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;
}
As the comment from CBroe points to, you issue is that you are expecting an element back from document.getElementsByClassName("navbar")
but you are actually getting back an array.正如 CBroe 的评论所指出的那样,您的问题是您期望从
document.getElementsByClassName("navbar")
返回一个元素,但实际上您正在返回一个数组。 To access the element you need to pull it out of the array, you can do this like document.getElementsByClassName("navbar")[0]
.要访问您需要将其从数组中拉出的元素,您可以像
document.getElementsByClassName("navbar")[0]
一样执行此操作。
So updating your code to因此,将您的代码更新为
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;
}
Should fix the issue.应该解决问题。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.