粘性导航栏在单击汉堡图标时没有完全响应

Question

我已经实现了使我的网页的导航栏具有粘性和半响应性，即它在调整大小时会变短，但是当缩短时，单击汉堡包图标会在屏幕顶部打开菜单(导航栏选项(最初定义的位置，而不是屏幕滚动的位置。

网页代码：

<div class="topnav" id="myTopnav">
<a href="#home" class="active">Home</a>
<a href="#career">Careers</a>
<a href="#fellowship">Fellowship 2018</a>
<a href="javascript:void(0);" class="icon">
<i class="fas fa-bars"></i>
</a>
</div>

CSS代码：

@media screen and (max-width: 600px){
.topnav.responsive{position: relative;}
.topnav.responsive .icon{
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a{
float: none;
display: block;
text-align: left;
}
}

JavaScript 代码：

document.addEventListener('DOMContentLoaded',function(){
window.addEventListener('scroll', myFunctionForSticky);
var navbar = document.getElementById("myTopnav");
var sticky = navbar.offsetTop;
function myFunctionForSticky() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky");
} else {
navbar.classList.remove("sticky");
}
}
var icon = document.querySelector("a.icon");
icon.addEventListener("click",function(){
navbar.classList.toggle("responsive");
})
})

Answer 1

要回答这个问题，你必须首先了解CSS中">定位"的概念。

TLDR;如果你真的希望你的标题在整个页面中是粘性的，你必须使用位置：固定

作为参考，你可以看看这支笔

@media screen and (max-width: 600px){
.topnav.responsive{position: fixed;}
.topnav.responsive .icon{
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a{
float: none;
display: block;
text-align: left;
}
}

这可能只是工作，您可能还必须为您的菜单图标提供一个 z 索引，以防它与列表项重叠。