DEV Community

Ahmed Musallam
Ahmed Musallam

Posted on

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

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;
}
Enter fullscreen mode Exit fullscreen mode

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!

Discussion (8)

Collapse
entrptaher profile image
Md. Abu Taher 👨‍💻

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.

Collapse
ahmedmusallam profile image
Ahmed Musallam Author • 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!

Collapse
entrptaher profile image
Md. Abu Taher 👨‍💻

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.

Collapse
link2twenty profile image
Andrew Bone

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

Collapse
entrptaher profile image
Md. Abu Taher 👨‍💻 • 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.

Thread Thread
ahmedmusallam profile image
Ahmed Musallam Author

You make a very good point here. And I guess this might be obvious enough for users to actually "get it" the first time they see it.

Collapse
dailymack profile image
Mr Daily • Edited

its has been fixed totally now

Collapse
ahmedmusallam profile image
Ahmed Musallam Author

I saw that, and thank you for confirming.