last sticky item in a list not sticking
https://codepen.io/mrjonoces/pen/NWQbyeW
Why doesn't the final item in the list stick? I've been banging my head against a brick wall for a while with this, including reading and watching a lot of content about common sticky issues but none have covered this issue
2 Replies
A “sticky” element is only sticky in relation to its parent. Whilst you are scrolling the container continues to scroll also.
By the time you scroll down to the last sticky element, as the container has no more content it has no where to stick to so it scrolls up with its parent .
If you remove the background color on each element you will see that all the previous elements also scroll up when the bottom of the container reaches them.
If you add some non-sticky content to your container you will see that it does stick in its position until all the content has scrolled up to it. You could also add a border to your container as this might help you visualize what is actually happening.
Thanks for explaining that, all makes sense. Doh!