Question

All I’m after is a bit of code that fits within what I have currently.

I have an arrow that is displayed near the top when the browser window less than 900px in height, when clicked the arrow will fadeout and take the user to a different part of the page. If the user scrolls back up to the top I’d like the arrow to fade back in so its visible again. This is my code so far:

if($(window).height()>900){
    $("#contact a.arrow").fadeOut();
}

if($(window).height()<900){
    $("#contact a.arrow").fadeIn(1000);
}

$("#contact a.arrow").click(function() { 
    $("#contact a.arrow").fadeOut(); 
});

$(window).resize(function() {
if($(window).height()>900){
    $("#contact a.arrow").fadeOut();
}

if($(window).height()<900){
      $("#contact a.arrow").fadeIn(1000);
}
}); 

Answer 1

I think you’re looking for the scroll event and the scrollTop function, e.g., something like:

var fadingIn = false;
$(window).scroll(function() {
    if (!fadingIn && $(window).scrollTop() === 0) {
        fadingIn = true;
        $("#contact a.arrow").fadeIn(1000, function() {
            fadingIn = false;
        });
    }
});

If not === 0 perhaps < n where n is how close to the top you want to be before the user starts seeing the arrow.