javascript - 淡入/淡出 div scrollTop

Question

我有一个浮动菜单，我想在您开始向下滚动页面时淡入，然后在您回到页面顶部时淡出。我已经让它在没有淡入淡出的情况下工作，但我不确定如何添加淡入淡出。任何帮助表示赞赏。谢谢。

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

css

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

Answer 1

您可以使用具有一定持续时间的fadeToggle作为参数（以防万一）而不是平面切换。这将完成您的工作。

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

Answer 2

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

Answer 3

你可以试试这个来测试是否div达到了顶部

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

测试小提琴