A Sticky Header is actually a technical term for the way the top part of a website (the Header) stays in place when you scroll down the page.
You’ve no doubt seen one before, but whether you actually appreciated it (let alone cared) is another matter.
Perhaps the main benefit of a Sticky Header is that, once you’ve scrolled down the page for a bit, when you want to navigate to another part of the website, then the menu is just there at the top, ready and waiting. After all, who wants to read all the way through a web page only to have to scroll all the way back up to the top once you’ve finished?
I sort of assumed that all Headers were sticky, that the top of every website just stayed put when I scrolled. Apparently not…
I need a decent reference point for this, so I’ll start with the big boys: Facebook, Amazon, Apple, Netflix and Google.
Unfortunately, Facebook presents a landing page which requires credentials that I don’t have (and don’t want) so I’m afraid that was a bit of a false start. Sorry. I guess that goes down as 0/1.
Amazon
Fortunately, I had no such trouble with Amazon. However, much to my surprise, the Header here is ‘Default’ in that it scrolls with the rest of the page, rather than staying put. Well, I never… 0/2.
Apple
With Apple, it was third time lucky and I can finally see a real-life functioning Sticky Header.
That was harder work than I expected. 1/3.
And it turns out that, even now that I’ve found one, I only need to follow Apple’s Header Menu as far as the Store option to find that the Header switches back to being Default:
FFS. I don’t even know how to keep score for this anymore.
Netflix
So what about Netflix?
Another Default one! Bloody hell! Sticky Headers appear to be the exception rather than the rule. How is that even possible?
And Google?
Well, by now I probably shouldn’t be surprised, but Google seem to have a one-of-a-kind-custom-header-thing going on.
More Questions Than Answers
After all that, I’m not entirely sure what I learnt.
- I’m left wondering how I ever got the impression that Sticky Headers were so prevalent.
- I’d like to know whether they behave the same way on Mobile because that’s where I first thought that they were particularly useful (if not indispensible) – i.e. to quickly access the Navigation Menu without needing to scroll all the way back to the top.
- I can see the benefits of having more screen space when the Header disappears, particularly on Mobile. However, this runs counter to my preference for retaining the Sticky Header on Mobile.
- I half-noticed that the Amazon Header had what seemed to be non-standard (or maybe even unique) behaviour in that it seemed to re-appear as soon as I started to scroll up. On reflection, this seems like a genius idea and elegantly resolves the conflict between points 2. and 3.
- How are all these things implemented? It’s all very well having an on-off button for whether a Header is Sticky or not but how is the subtlety introduced and managed? Clearly, I still have a lot to learn.
What Would Dave Do?
When in doubt, the bloke with the answers for all things internet is usually my brother, Dave.
It turns out that Dave’s Header goes transparent on scroll, which is yet another approach that I hadn’t considered. Furthermore, I have no idea how he did it. I’ll have to ask him.
My goodness, this was a real can of worms, wasn’t it?
Leave a Reply