当英雄图像进入视口时如何突出显示缩略图答案

【问题标题】：How to highlight the thumbnail image when the hero image comes into viewport当英雄图像进入视口时如何突出显示缩略图
【发布时间】：2019-03-13 00:13:39
【问题描述】：

我正在尝试实现一个功能，在该功能中，当该图像超过 50% 并且位于视口中时，该图像的相应缩略图会突出显示。并且还使缩略图具有粘性，以便用户可以单击它来导航到相应的图像。

我试图在不使用任何 Bootstrap 框架的情况下通过 jQuery 来执行此操作，请参阅以下站点以更好地理解这一点。我也希望为我的网站实现相同的功能。

我知道我们可以 .visible() 来检查图像是否可见，但这里也希望突出显示主图像的相应缩略图。

任何建议/想法都会有很大帮助！

【问题讨论】：

【解决方案1】：

在这里，我认为您可以使用数组的索引来识别缩略图及其各自的英雄图像。正如您在帖子中所说，您知道识别英雄图像的逻辑。所以你只需要使用相同的索引来查找缩略图并使用边框 css 添加一些 selected 类。

【讨论】：