Hey there! I was working on implementing a dynamic header that resizes as you scroll on the page. I also decided to try out Headroom as an additional solution, and it seems to be functioning well in terms of hiding the header. You can check out my progress HERE. The first time you scroll, the resizing happens smoothly to reach a smaller header of 45px, after which Headroom kicks in to hide it. However, on subsequent scrolls, the resizing doesn't happen smoothly and there's a noticeable jump to the smaller header before Headroom hides it. I'm working on ensuring a seamless resizing experience every time you scroll (you'll see the resizing at shrinkOn = 50, and the header hide at a tolerance of 300 in the headroom code).
Here is the script for shrinking the header:
<script>
function init() {
window.addEventListener('scroll', function(e){
var distanceY = window.pageYOffset || document.documentElement.scrollTop,
shrinkOn = 50,
header = document.querySelector("header");
if (distanceY > shrinkOn) {
classie.add(header,"smaller", "headroom");
} else {
if (classie.has(header,"smaller", "headroom")) {
classie.remove(header,"smaller", "headroom");
}
}
});
}
window.onload = init();
</script>
And here is the script for activating Headroom:
var myElement = document.querySelector("header");
//construct an instance of Headroom, passing the element
var headroom = new Headroom(myElement);
//initialize
headroom.init();
These are the options:
"tolerance": 2,
"offset": 350,
Thank you in advance for your help and suggestions!