基于鼠标滚轮滚动内容设置活动文本链接+将文本链接链接到每个鼠标滚轮滚动内容

Question

我知道这是一个JS/ jQuery问题，我有很好的CSS技能，但遗憾的是，我的JS知识让我失败了。我最近为我的投资组合买了一个网站模板。这是一个很好的选择，但我真的很难适应它。

我想要实现的是：

• 当鼠标滚动(向上或向下)滚动每个内容块时，下面(页面底部)的链接基于上面的内容是活动的。前后都是。因此，基本上，底部的文本链接将是粗体的，取决于上面的活动内容。
• ，我也希望下面的文本链接链接到上面的相关内容。即项目3将打开项目3内容(带有内容动画)。

首先，我尝试针对内容块的每个ID。也就是说，id="project-3“然后添加href="#project-3”，但这显然是行不通的。我还尝试了数据-target=“#project-3”。还是没有骰子。

我试图在这里模仿这个精彩网站的底部导航：http://fakemusic.fr/ (所以当你在每个艺术家中滚动时，下面的链接会被高亮显示，它们是可点击的。)

我在这里做了一个科普

[Codepen](https://codepen.io/oioisaveloy/pen/eYzjGLr)    

很抱歉，我无法解决如何去激活烦人的预加载程序。

提前感谢！

Answer 1

使用Jquery非常容易。

为每个“显示表”类提供一个唯一的数据id，并在“菜单项”的锚点中给出唯一的id。

创建一个具有突出显示css (如下划线)的css类

然后尝试jquery条件js，例如，如果您的“display类”有类"projects-item-active“，那么添加类来锚定id并从兄弟姐妹中移除。

如果有人点击锚，然后添加类“项目-项目-活动项目-项目-动画”到“显示表”，并从兄弟姐妹删除。

单击项目1、项目2、项目3，请参阅

笔加

[1]: https://codepen.io/mamun-rashid-raja/pen/zYBLRrp