I like the new dev.to fixed reaction bar. but let's hide it for fun!

#discuss #meta

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!

Top comments (8)

Md Abu Taher • Sep 14 '18

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.

Ahmed Musallam • Sep 14 '18 • Edited

hmm I think that would be confusing.. if the bar stuck to the bottom of the page then stuck to the bottom of the post once you reach the end of the post (old position). Might just be me :)

I totally agree on customization! I think that would be awesome!

Md Abu Taher • Sep 14 '18

I saw many websites did that. It would be fixed on bottom for whole post except when the user reaches end of post it will stick there just in case. Similar to hidden, but actually more realistic.

Andrew Bone • Sep 14 '18

In theory, you could use sticky to achieve this. Something like this jsfiddle.net/link2twenty/bn9hcj5L/

Md Abu Taher • Sep 14 '18 • Edited

Yup exactly.

The reason being, the users actually don't use the save/heart button after the post.

Say for yourself, how many times you actually went above and clicked save/heart button after reading comment or clicking additional links? Or watching that big footer?

Well, maybe people shares the post even at that point, but honestly this feature is very new and monitoring the behavior might show more UX hacks in future.