我如何使这个菜单栏

Question

我一直在看这个非常酷的菜单栏它可以从不同的vh改变。(链接:https://forgecoaching.gg/)

我已经试着写了3天了。尝试了一些观察者结合一些CSS关键帧和

，还有一个ScrollTrigger。我无法让它工作。

我在这段代码中举了一个例子:如何显示div再次使用vh滚动时?

但我似乎不能使它工作。有人能给我解释一下吗?

抱歉，我是javascript新手

Answer 1

您可能需要查看w3schools的" How to "中的示例。它看起来像你想要的菜单栏。https://www.w3schools.com/howto/howto_js_navbar_slide.asp下面是代码:

HTML

<div id="navbar">
<a href="#home">Home</a>
<a href="#news">News</a>
<a href="#contact">Contact</a>
</div>

CSS

#navbar {
background-color: #333; /* Black background color */
position: fixed; /* Make it stick/fixed */
top: -50px; /* Hide the navbar 50 px outside of the top view */
width: 100%; /* Full width */
transition: top 0.3s; /* Transition effect when sliding down (and up) */
}
/* Style the navbar links */
#navbar a {
float: left;
display: block;
color: white;
text-align: center;
padding: 15px;
text-decoration: none;
}
#navbar a:hover {
background-color: #ddd;
color: black;
}

JavaScript

// When the user scrolls down 20px from the top of the document, slide down the navbar
// When the user scrolls to the top of the page, slide up the navbar (50px out of the top view)
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
document.getElementById("navbar").style.top = "0";
} else {
document.getElementById("navbar").style.top = "-50px";
}
}