How can I make a button appear on scroll just using 'plain' html, CSS and Javascript

Question

I've tried to accomplish this, (since I am a noob at coding...) with a concept I found online... it didn't work out very well, and offline the scroll padding and "Sign In' button appears for a second than disappears...

To view web:

Click Here

if someone can please send me a simple code including: Html, (Css,) JavaScript, (no Jquery) of how to accomplish the same idea (of the button) on that site...

Thank You!

Answer 1

You want to listen for window scroll events and check to see if the main button is visible. You can do this by checking it's position inside the window using Element.getBoundingClientRect();

The bottom property tells you how many pixels the bottom of the element is from the top of the screen. If the number is below zero, it means the bottom of the element is off the top of the screen.

At that point, just toggle the hidden button into view. In my demo, I did this by adding a CSS class to that button.

If the user scrolls up and the main button is visible again, you can hide the side button by removing the class you previously added to it.

JS Fiddle Demo Here

Answer 2

Using scroll event with getBoundingClientRect may decrease performance You can use intersection observer for checking an element enter in viewport https://developers.google.com/web/updates/2016/04/intersectionobserver