Fade in a ID when scrollbar hits top of browser

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

score 0 · Accepted Answer · answered Nov 15 '12 at 11:02

0

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.

answered Nov 15 '12 at 11:02

T.J. Crowder

1,031,962
187
1,923
1,875

How would I do the checking? – egr103 Nov 15 '12 at 11:03
@egr103: It's pretty basic logic, I've added a simple check above. – T.J. Crowder Nov 15 '12 at 11:04

Fade in a ID when scrollbar hits top of browser

1 Answers1