Как выделить эскиз изображения, когда изображение героя попадает в область просмотра

Question

Я пытаюсь реализовать функцию, при которой соответствующий эскиз изображения героя подсвечивается, когда это изображение пересекает 50% и находится в окне просмотра.А также сделайте миниатюры липкими, чтобы пользователь мог щелкнуть по ним, чтобы перейти к соответствующему изображению.

Я пытаюсь сделать это с помощью jQuery без использования какой-либо среды Bootstrap, ссылка для лучшего понимания этого видна, как показано вниже сайта.Я также хочу реализовать те же функции для моего сайта.

Я знаю, что мы можем .visible () проверить, является ли изображение видимым, но здесь я хочу выделитьсоответствующая миниатюра изображения героя.

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

Любые предложения / идеи будут очень полезны!

Answer 1

Здесь я думаю, что вы можете использовать индекс массива для распознавания миниатюры с соответствующим изображением героя.Как вы сказали в посте, вы знали логику идентификации образа героя.Так что вам нужно просто использовать тот же индекс, чтобы найти миниатюру и добавить к нему класс selected с границей css.