I thought this was cool:

Changelog: Sticky Post Actions UI Change

Ben Halpern ・ Sep 13 '18 ・ 1 min read

#changelog #meta

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!