CSS / Javascript - 视差滚动 - Scrollmagic链接移动阻止其他图像链接

Question

Hello其他程序员， 我是HTML5 / CSS / Javascript编程的新手，我会尽量让我的问题变得清晰。

我在我的网站上使用了滚动魔术，当您向下滚动时导航链接滚动到侧面。这是link to the page。尽管如此，我已经意识到当我这样做时，当导航链接和我的图像元素（它们上面的链接区域）处于相同的横向级别​​时，我无法再单击下面的图像：Scrollmagic链接移动块其他图片链接。我希望能够在整个视差滚动中单击两个链接，即使导航链接和缩略图链接处于同一级别。

我试图：更改两个元素的z值，更改.site-nav和page-nav尺寸，并花了很多时间尝试编辑零碎，以查看问题可能在哪里解决了，但都无济于事。以下是我认为答案所属的CSS的部分内容，但我可能错了。

用于视差导航链接的CSS：

.site-nav {
display: block;
position: fixed;
width: 100;
text-align: center;}

用于图像缩略图链接的CSS（包含指向HR图像的链接）：

.page-nav {
display: block;
width: 100%;
text-align: center;
z-index: 10;
margin-top: 300px;

}

所以如果这听起来像是一个简单的答案，这对我来说真的很有帮助。希望我的帖子是相关的，有道理！如果有任何需要澄清，请告诉我。

Answer 1

这是不可能的。您有一个固定位置的无序列表。列表的宽度跨越整个页面，将阻止您单击该导航容器下面的元素。这可以通过使用Chrome的开发工具看到（请参阅我的屏幕截图）。您可能想要尝试的一件事是在元素向右滑动后减小容器的宽度，但这意味着要更多地使用javascript。