阻止点击

Question

我在Pen上有一个页面 https://codepen.io/nenadmail/pen/KmRbGO

向上滚动时，顶部的导航栏会隐藏，然后在向上滚动时取消隐藏。但是，向上滚动时导航栏附近的任何链接在导航栏下都是不可点击的。如何使导航栏标题下的链接可单击？

谢谢！

<header class="header" role="banner">
    <div class="maintop">
        <nav>
            <ul>
                <li><a href="#services">Services</a></li>
                <li><a href="#clients">Clients</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </nav>
    </div>
    <div class="maintopL">
        <a href="#home">
            <h1 id="mainlogo">N2 Mixology</h1>

        </a>
    </div>
</header>

<p>Lorem Ipsum is simply dummy text of the printing and typesetting 
industry. Lorem Ipsum has been the industry's standard dummy text ever 
since the 1500s, when an unknown printer took a galley of type and 
scrambled it to make a type specimen book. It has survived not only 
five centuries, but also the leap into electronic typesetting, rem 
aining essentially unchanged. <a href ="#">I want this link to work 
even when it is near the nav bar</a>It was popularised in the 1960s 
with the release of Letraset sheets containing. </p>
<p> Lorem Ipsum passages, and more recently with desktop publishing 
software like Aldus PageMaker including versions of Lorem Ipsum.Lorem 
Ipsum is simply dummy text of the printing and typesetting industry. 
Lorem Ipsum has been the industry's standard dummy text ever since the 
1500s, when an unknown printer took a galley of type and scrambled it 
to make a type specimen book. It has survived not only five centuries, 
but also the leap into electronic typesetting, remaining essentially 
unchanged. It was popularised in the 1960s with the release of Letraset 
sheets containing. </p>
<p>Lorem Ipsum passages, <a href ="#">I want this link to work even 
when it is near the nav bar</a>and more recently with desktop 
publishing software like Aldus PageMaker including versions of Lorem 
Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting 
industry. Lorem Ipsum has been the industry's standard dummy text ever 
since the 1500s, <a href ="#">I want this link to work even when it is 
near the nav bar</a>when an unknown printer took a galley of type and 
scrambled it to make a type specimen book. It has survived not only 
five centuries, but also the leap into electronic typesetting, 
remaining essentially unchanged.</p>

Answer 1

您需要点击div，您可以使用pointer-events: none;在css中执行此操作。确保将指针事件添加回您希望单击的导航栏项目：< / p>

header {
    pointer-events: none;
}
header div {
    pointer-events: all !important;
}

https://codepen.io/alessi42/pen/JNeBer

希望这有帮助！