I'm using the awesome Headroom.js plugin to build an auto-hiding header. The header is static from start and becomes pinned after an offset (when scrolling down) and then back to static (when it's back to the top).
Here is what I have done: http://codepen.io/netgloo/pen/KmGpBL
but I got 2 problems:
- scrolling down from top: when the header becomes pinned, I see it slides down and suddenly slides up
- scrolling up from middle page: when the header arrives to the offset it disappears, but I need keeping it pinned to the top
Someone could give me some help or ideas? Thanks
Here is how I initialize the plugin:
var myElement = document.querySelector("header");
var headroom = new Headroom(myElement, {
"offset": 150,
"tolerance": 0,
});
headroom.init();
The
headroom.jsscript mainly handles the addition/removal of some classes for you. It's up to you to add the appropriate styles to achieve the effect you want. Let's start with the simplest part, the HTML:HTML
That's it!
Now for the JS setup:
JS
The first line selects the
headerelement. The second creates a newHeadroomobject using the configuration values. I've set the values based on the effect it sounds like you're trying to achieve - the header should slide away when the page is scrolled down quickly, and should slide into view when the page is scrolled up.The
offsetof 205px is the distance from the top when the header can become unpinned.The
toleranceof 5px is the scroll tolerance before the state changes.And finally we're going to define the classes that will be added to the element for the different states. At the start the element will be assigned a class of
header--fixed. When pinned, the element will receive the additionalslideDownclass. And when unpinned the element will receive the additionalslideUpclass.The final line initializes the
headroomobject.Using the state-based classes we can now create the CSS needed to achieve the effect you want.
CSS
We'll start with the
.header--fixedclass:This sets the initial placement of the header (at the top) and sets a padding for the main content of the page so it's not covered by the header.
Next we need to define the styles for various states -
.top,.not-top,.slideDownand.slideUp:Most of these styles are related to setting the position and transition for each state. In short, the
.not-topclass is applied when the page is scrolled below the header..topis applied when the page is scrolled near the top (within the height of the header).In addition to this critical CSS you would need the CSS for the styling of the header - a background color, font, etc. This could be applied by targeting the
headerelement, orheader--fixedclass.The final piece, and crux of the problem is resetting the header when the page is scrolled back to the very top - ie a
window.pageYOffsetof0. When the page reaches this point, we need to remove the.slideDownclass so the header scrolls with the page.The Full Code
Putting it all together we get this:
And with that we have everything we need. For a working example with the CSS done in SCSS like your example, see this Codepen.