固定菜单出现问题-它涵盖了内容

Question

我在固定菜单上遇到问题：

header nav.nav__menu--desktop {
    display: flex;
    position: fixed;
    top: 0;
    width: 100%;
    align-items: center;
    height: 60px;
    background: #313639;
    z-index: 999;
}

我在菜单中的ID部分使用了锚点：

<nav class="nav__menu--desktop">
    <ul>
        <li><a href="#">home</a></li>
        <li><a href="#aboutUs">about us</a></li>
        <li><a href="#ourServices">services</a></li>
        <li><a href="#">contact</a></li>
        <li><a href="#">help</a></li>
    </ul>
</nav>

当我单击选项菜单时-例如服务，我得到以下结果：

我的导航涵盖内容[高度导航]：

Answer 1

在这里a行-因为您没有提供完全可重复的示例-我认为问题是您的标头是fixed，但您没有从覆盖内容的容器中扣除它的高度

提供元素e.currentTarget.x会将其从页面的流中取出，并视为不存在。为了使页面按预期工作，应为内容提供这种样式：position: fixed。 60px 是固定标头的高度。我尝试在codepen中重新创建您的问题，以供您尝试此解决方案。

Answer 2

我的JS + CSS

window.onscroll = function() {myFunction()};

var header = document.getElementById("main_nav");
var sticky = header.offsetTop;

function myFunction() {
    if (window.pageYOffset > sticky) {
        header.classList.add("sticky");
    } else {
        header.classList.remove("sticky");
    }
}

header nav.nav__menu--desktop {
    display: flex;
    width: 100%;
    align-items: center;
    height: 60px;
    background: #313639;
    z-index: 999;
}
.sticky {
    position: fixed;
    top: 0;
    width: 100%;
}

Answer 3

好吧，我以非常简单的方式解决了问题-我在本节的css中添加了

    scroll-margin-top: 60px;

然后工作：）