Scroll down indicator css javascript and html
I have seen these a couple of times, indictating to the user that there is further content down the page, and they should scroll to view it.
Then as you scroll down the indicator dissapears.
So we will need to have some scroll position checking.
Then a fixed element that indicates you can scroll (just incase the scroll bars are not enough of an indication i spose).
Animated Scroll Icon
These ones on codepen seem quite nice
you could almost just use the screen recorded gif of this one if you didnt want all the additional css...
but i guess that is a bit lazy... ;)
Lets add the icon
then add the jquery that monitors the scroll position so then when the page is scrolled the icon can be hidden.
i found that position fixed worked better than absolute, but depends on the wrapping container.
Also to make sure the container does not get in the way of anything use the pointer events none.
here it is in action (yes i know the image is not cropped properly or transparent! :) )
HTML
<div class="scroll-down"></div>CSS
.scroll-down {
height: 93px;
width: 100%;
background: url(https://i.imgur.com/rFAcBlU.gif) center no-repeat;
position: fixed;
top: 80vh;
z-index: 200; /* make sure its always on top... */
pointer-events: none;
}
.hide {
display:none;
}Javascript
$(window).scroll(function() {
if ($(document).scrollTop() > 50) {
$('.scroll-down').addClass('hide');
} else {
$('.scroll-down').removeClass('hide');
}
});
