Html Div阻止点击下面的链接

我的钢笔上有一页

向下滚动时，顶部的导航栏将隐藏，然后在向上滚动时取消隐藏。但是，当您向上滚动时，导航栏附近的任何链接都无法在导航栏下找到。如何使导航栏标题下的链接可单击

谢谢

<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>

Lorem Ipsum只是印刷和排版的虚拟文本
工业。Lorem Ipsum一直是业界标准的虚拟文本
从16世纪开始，当一个不知名的印刷商在一个厨房里打印
把它拼凑成一本样本书。它不仅存活了下来
五个世纪，但也飞跃到电子排版，rem
艾宁基本上没有变化。它在20世纪60年代流行起来
随着Letraset板材的发布，包含

Lorem Ipsum文章，以及最近的桌面出版
Aldus PageMaker等软件，包括Lorem Ipsum.Lorem的版本
Ipsum只是印刷和排版行业的虚拟文本。
Lorem Ipsum自上世纪90年代以来一直是业界的标准虚拟文本
16世纪，一个不知名的印刷商拿起一个印刷机，把它翻了个底朝天
制作一本样书。它不仅存活了五个世纪，
但同时也向电子排版迈进，基本上保持不变
不变。它在20世纪60年代随着Letraset的发行而流行起来
包含

Lorem Ipsum段落，最近使用桌面
发布软件，如Aldus PageMaker，包括Lorem版本
Lorem Ipsum只是印刷和排版的虚拟文本
工业。Lorem Ipsum一直是业界标准的虚拟文本
从16世纪开始，当一个不知名的印刷商在一个厨房里打印
把它拼凑成一本样本书。它不仅存活了下来
五个世纪，也是电子排版的飞跃，
基本保持不变

您需要能够点击

div

您可以在css中使用

指针事件执行此操作：无确保将指针事件添加回要单击的导航栏项目：

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


希望这有帮助
 谢谢。我试过了。当我这样做时，徽标不会与导航栏一起隐藏：（问题，您希望您的徽标在导航栏外的代码笔中显示并与文本重叠吗？或者您希望这样显示吗？是的。当然。这就是我的代码笔中显示的外观。徽标需要与文本重叠。但一旦用户滚动，它需要与导航栏一起隐藏。有趣。这似乎可行。但现在导航栏中的链接工作方式不同。太好了！非常感谢！