vendredi 9 août 2019

How would I get a div with position absolute to follow another div based on the position on the viewport?

I would like a div to track and re-position itself to another div based on the other div's position onscreen.

I'm trying to organize my website content so that my lined-up thumbnails have expanded details (ThumbExpand) when you hover over them, but also a netflix-style scroll button on both sides of the div containing the thumbnails, the (ThumbBox).

The ThumbBox needs overflow:hidden so you don't see the extra thumbnails before you click the scroll button. I'd like the ThumbExpand to appear over the ThumbBox and on top of it's relevant thumbnail while also not disturbing the other thumbnails it's overlapping.

So using javascript I gave the ThumbExpand's wrapper position:absolute only when it's expanded so it would be visible regardless of overflow. Then tried getting the thumbnails position onscreen using var rect = element.getBoundingClientRect(); and setting the ThumbExpand position to it with ThumbExpand.style.left = rect.left.

ThumbExpand does not change position however and I don't see another way to do what i"m trying to do.




Aucun commentaire:

Enregistrer un commentaire