淡入/淡出div滚动

Question

I have a floating menu that i want to fade in when you start to scroll down the page, then fade out when you are back at the top of the page. I have got it working without the fade, but im not sure how to add the fades. Any help appreciated. Thanks.

$(document).scroll(function() {
    $('#floatingnav').toggle($(this).scrollTop()>250)
});

css

#floatingnav {
    position:fixed;
    display:none;
}

Answer 1

You can use fadeToggle with some duration as an argument(just incase you want) instead of plane toggle.That will do your job.

$(document).scroll(function() {
     $('#floatingnav').fadeToggle($(this).scrollTop()>250)
});

Answer 2

You can try this to test if div has reached top

$(window).scroll(function () {
   var d = $('div'); // this is your fixed div
    if (d.offset().top > 250) {
       d.fadeIn();
    } else {
       d.stop().fadeOut();
    }
});

TEST FIDDLE

Answer 3

$(window).bind("scroll", function() {
    if ($(this).scrollTop() > 250) {
        $("#floatingnav").fadeIn();
    } else {
        $("#floatingnav").stop().fadeOut();
    }
});