loading...

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

ahmedmusallam profile image Ahmed Musallam ・1 min read

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!

Posted on Sep 14 '18 by:

ahmedmusallam profile

Ahmed Musallam

@ahmedmusallam

Lead Developer: Adobe Experience Manager. Father of one. Minnesota. Occasionally write here: ahmedmusallam.com and there: https://blogs.perficientdigital.com/author/amusallam/

Discussion

markdown guide
 

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.

 

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!

 

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.

 

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

 

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.

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.

 

its has been fixed totally now

 

I saw that, and thank you for confirming.