无法访问另一个定位元素下方的链接

Question

我正在尝试创建一个滑动事件，该事件将隐藏/显示移动就绪页面底部的导航。滑动需要位于页面底部，就好像用户正在滑动导航本身一样。

我有一个<nav>，其上方有<div class=swipearea>，两者都固定在页面底部，而.swipearea的z-indexed高于导航。当然，这使导航中的链接无法点击。我尝试过<nav>可以滑动，但是当我向下滑动时，这只会拖动桌面测试计算机<nav>中的元素。如果我把这个事件放在div.swipearea上，那么这个功能就像一个魅力，但没有链接是可点击的。

我需要能够点击链接并能够向上或向下滑动导航。我建议使用一个小标签，但客户端不想使用它。他们希望默认情况下隐藏导航，向上滑动并显示导航，向下滑动并消失。

当然，我也需要导航链接。

示例代码：

<div class="swipearea"></div>
<nav>
    <ul>
        <li><a href="somewhere.html">Link1</a</li>
        <li><a href="another.html">Link2</a></li>
        <li><a href="yetanother.html">Link3</a></li>
    </ul>
</nav>