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

Posted 2023-03-29

【中文标题】当英雄图像进入视口时如何突出显示缩略图

【英文标题】：How to highlight the thumbnail image when the hero image comes into viewport

【发布时间】：2019-03-13 00:13:39

【问题描述】：

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

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

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

https://www.everlane.com/products/mens-cotton-crew-stone?collection=mens-all

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

【参考方案1】：

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