Geek Answers Handbook

Sticky position: scrolls when longer than the viewing area

When an element with position: sticky “stuck” and longer than the viewport, you can only see its contents after scrolling to the bottom of the container.

It would be great if the “stuck” element scrolled along with the document and stopped as soon as it reached its bottom edge. If the user scrolls back, then this will happen again, but vice versa.

Examples

TL; DR; There is a library ( StickyKit ) that does what I'm looking for, but does not work well with the new asynchronous scrolling.

JSFiddle with StickyKit - https://jsfiddle.net/cibulka/4nd3b0tt/ - (this does what I describe but does not work well, see below)

JSFiddle with native position: sticky - https://jsfiddle.net/cibulka/np6afe9c/1/ - https://jsfiddle.net/cibulka/pxz6e0qv/ - (it's not)

Background

I have long been a happy user of StickyKit. Unfortunately, this does not work very well with asynchronous scrolling , which is used by more and more browsers to improve performance. For example, using the new Quantum (57) browser, StickyKit is pretty unsuitable.

I created a problem in StickyKit Github, but the package seems to be left by the author: https://github.com/leafo/sticky-kit/issues/252

Because of this, I have to abandon StickyKit and go to native position:sticky (poly filled StickyFill ). Unfortunately, there are a few things that position:sticky cannot do, and this is one of them.

There is another problem that I encountered position:sticky : Position sticky: overlay

What i'm looking for

The recommendation is basically how to approach this problem. I am going to use another JS / jQuery library, write my own code, or use some fancy CSS hack to crack position:sticky functionality.

Thanks in advance!

+7
javascript css sticky
source share
1 answer

You viewed Scrollama

It uses the new Intersection Observer Web API, which basically supports the JS browser when some element appears inside the viewport, without the need for JS to listen to scroll events. Therefore, it is useful to implement position: sticky like behavior in JS in its own way.

0
source share

More articles:


All Articles