Simple Sticky Element


The Action:

The user scrolls down the page and once the scrolling reaches the top of an element of my choosing, that element sticks to the top of the window, so it's always visible from that point on.



1. Include the "sticky element" code.

2. Add a div with the class of "element-sticky", and a div within that with a class "element-sticky-content".

3. Add whatever content is needed within the "element-sticky-content" div.


Other Notes:

1. All of the css is included in this file, so there isn't a need for a stylesheet document with this

2. When the div sticks to the top of the page, an additional class ("element-sticky-fixed") is added to the "element-sticky-content" div.






Related Posts

Fixed Position Div Isn't Staying Fixed When Scrolling on Android

My nice fixed position toolbar wasn't sticking as it should as I scrolled through on my mobile browser window...
Read Post

Chrome displays a different height than what Chrome says the height should be.

I was changing the height of an element, but no matter where I specified the height, it wasn't displaying what I was putting in
Read Post

A Nicer Select Dropdown

Better select boxes are all over the internet, but I actually couldn't find one that I liked, and that worked for what I needed...
Read Post

Removing the Horizontal Margins on a Google Chart Graph

I seem to be able to successfully modify quite a bit with google charts, but I couldn't find a good way to remove the horizontal padding to the left and right of a google graph. From what I can find, there really isn't a good way to do it...
Read Post