how can I make my image (down arrow) disappear when I start scrolling my page?


Tags: jquery,css

Problem :

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



Solution :

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);
});

    CSS Howto..

    how do angularJS user handle - using bootstrap css/fonts but exclude the jquery controls - scenario

    How to design aggregations filter in css for week, month?

    How to make an image fully flexible in terms of display size?

    Want to override Bootstrap, but how to avoid the use of !important?

    How to set CSS rule for a LI in a UL nested in DIV with class?

    How to set background image to keep its position while browser width is changing?

    How do I get Jquery to toggle display

    How to build some basic tiles with Title and Description?

    How to detect and deliver separate CSS files for mobile devices?

    How to exclude CSS file from Visual Studio intellisense?

    css how to make the background image padding to right

    How to make a smooth dashed border rotation animation like 'marching ants'

    How to style parent li elements of headers using CSS?

    How to use scss with css modules / postcss inside components

    the tab's content shows abnormal under IE7

    How do I make an image resize inside a div that is resizing to a percentage of a parent div?

    show the div inside that div next to it

    How to center child divs along each side of a parent div

    How to change class of all children with jquery?

    How to attribute different ids to child elements depending on the number of parent-like elements in that container

    How to change CSS attribute value based on querystring using jQuery

    How to hide a div with jquery or alternative?

    Show Item when Hover Over Parent

    How to change ListView cell's text color in JavaFX using css

    Css - how to add an image outside a text box (on the left side but touching the box)

    How to get two CSS rating star widgets to not affect each other when clicked

    How to set font style light?

    how to set css and html in textarea [closed]

    How to remove pseudo-element styles from the first element?

    How is Bootstrap's `nav` class making anchors move to their own line