When adding captions to the bottom of a thumbnail it can happen that a thumbnail that is overflowing the viewport (i.e. is partly beyond the “fold”) is being hovered but the caption won’t be seen because it appears on the bottom part of the image that is not visible. The user would have to scroll the page in order to see the bottom of the item and eventually the caption.
A small trick can solve that problem by simply making the caption “sticky”. This would mean that the caption will be visible not only at the bottom of every thumbnail but also in any place, sticking at the bottom of the page, if the thumbnail hovered is overflowing the current view.
What we basically do is to imitate position: sticky but since it’s not yet supported in many browsers, we’ll do a bit of JavaScript to achieve the same result. We’ll be using jQuery.
The main idea is to see when a hovered element overflows the viewport and show the caption in the right place by changing its position from absolute to fixed.
