如何解决响应式导航栏链接/列表按钮
我想为我的导航栏创建一个包含链接的按钮。但我不知道如何设置它,因为我(可能)粘性导航栏的代码不好。我希望此按钮出现在特定宽度之前,适用于智能手机和平板电脑。
这是我的代码:
window.onscroll = function() {
myFunction()
};
var navbar = document.getElementById("navbar");
var sticky = navbar.offsetTop;
function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky")
} else {
navbar.classList.remove("sticky");
}
}
// When the user scrolls the page,execute myFunction
window.onscroll = function() {
myFunction()
};
// Get the navbar
var navbar = document.getElementById("navbar");
// Get the offset position of the navbar
var sticky = navbar.offsetTop;
// Add the sticky class to the navbar when you reach its scroll position. Remove "sticky" when you leave the scroll position
function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky")
} else {
navbar.classList.remove("sticky");
}
}
#navbar {
background: black;
display: relative;
overflow: hidden;
z-index: 3;
}
#navbar a {
display: block;
color: white;
text-align: center;
text-decoration: none;
float: right;
margin: 18px 14px;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
}
<div id="navbar">
<a href="#contact" style="margin-right: 35px;" class="animation">Contact</a>
<a href="#ourteam" class="animation">Our Team</a>
<a href="#events" class="animation">Events</a>
<a href="#home" class="animation">Home</a>
</div>
你能帮我吗?
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。