I thought this was cool:
But then I wondered what the experience would be like if the bottom bar slid down when you scroll down and showed back up when you scrolled up. So I looked up how I can make that happen. Easily, it turns out:
https://www.w3schools.com/howto/howto_js_navbar_slide.asp
now let's use that to make this happen:
Made possible with https://getkap.co/
The code is really simple:
var initialScrollPos = window.pageYOffset;
var bar = document.getElementById("article-reaction-actions");
bar.style.transition = "bottom 0.25s"
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
if (initialScrollPos > currentScrollPos) { // user scrolled down
bar.style.bottom = "0";
} else { // user scrolled up
bar.style.bottom = `-${bar.offsetHeight}px`; // 80 is a number larger than the bar's height
}
initialScrollPos = currentScrollPos;
}
I am aware that this can be optimized, but it's only for illustration purposes :)
I don't know which one I like best... The transition is nice, but the fixed bar might be better to keep the reader focused on reading not looking at the bar moving. I'd love to hear your thoughts!
Honestly I had something very similar in mind, except it will revert to old when scrolled to bottom of post instead of hidden. I like how we all are thinking similarly.
Also thinking if we could personalize these kind of tricks somehow in the profile settings or personalization settings somehow.
Great post.