I have the following page http://jsfiddle.net/Leytgm3L/20/ and there's this white square that in the future will be the link to the area below - how can I make so when user starts scrolling down then this icon will disappear? so far the css for this arrow looks like this:
.next-section {
width:60px;
height:60px;
background-color:white;
background-image:url(../img/next_section.png);
background-size: 34px 18px;
background-repeat:no-repeat;
background-position:13px 21px;
position:absolute;
bottom:0px;
left:50%;
margin-left:-30px;
opacity:0.9;
}
I'm just not sure if I can do it only in CSS or should I use some jquery here (also - I don't know how to do it here)... Thanks
Just a bit of jQuery
$(window).scroll(function() {
if ($(this).scrollTop() > 0) {// can be whatever, 0 refers to the top space you allow
$('.move').hide();// Hide your element
}
else {
$('.move').show();// It's just if you want to show back the element if we're back on top
}
});
Take note that I, according to your fiddle masked the link (.move) and not just the inner div.
Hope it's gonna help you
If you want to show back, take a note to the comment of Juan C and use his code:
$(window).scroll(function(){
$(".move").toggle($(this).scrollTop() === 0);
});
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments