Question

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

HTML代码：

<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中“ POSITIONING ”的概念。

TLDR; ；如果您确实希望页眉在整个页面中保持粘性，则必须使用位置：固定

供参考，您可以看看此pen

@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-index。

粘性导航栏在单击汉堡包图标时无法完全响应

1 个答案: