I like the way sticky headers work on various web sites I’ve
seen. There are some really interesting implementations where the
header changes when it gets to the top of the page, which is fun. I
wrote up a JS module called
ScrollSticky which is out on my GitHub
- Things I had to figure out.
Things I had to figure out.
cloning the header
This was just a little harder than I thought it would be, and required
a lot of playing around to figure out what to do. The result is in the
StickyScroll.cloneTarget function. Cloning the header was pretty
easy, but then I needed to ensure the clone didn’t have the same
attribute, and needed to acquire some style properties that might not
be on the original. To make to actually stick to the top, the top has
to be set to zero, positioning needed to be fixed.
The cute part, when you set a block element’s position to fixed, it no longer takes up the same width (the width gets calculated to the content box). So I also had to set the width property.
Figuring out the actual width took some digging and I found the
offsetWidth property, but to make it actually work for the style, I
needed to specify the measurement, “px”.
Adding the cloned element to the document
I made a jsfiddle to try it out.
determining the header’s offset in the document
In jQuery, there’s a nice
.offset function that gives this, but in
POJS, you have to do a bit more. The
explains how to do this,
but doesn’t offer code. The resulting code ended up easier than I
thought it would be. (Answers from SO were varying.)
performing the action during scrolling
I had to play around a lot with this to get it right. I’m not sure all the different things I tried, but eventually figured it out.
using display instead of visibility property
One thing I did not figure out, the jQuery versions used the
visibility CSS property for the sticky header, but what I found
happening was the the “roll-under” fix I put it the CSS was not
working as I’d want. The invisible sticky header clone would push the
anchored element down too far. I ended up switching to use the
display property instead.
Here’s the demo page: