Question

下面的代码，当scrollTop（）超过400px时会使“Go to top”按钮淡入，这样可以正常工作，但我还没有找到办法让它在我返回时淡出顶部。

$("#gototop").css("opacity", "0");
$(window).bind('scroll', function(){
    if($(this).scrollTop() > 400) {
        $("#gototop").animate({
            opacity: 100,
        }, 3400);
    }
});

如果后没有帮助的其他，我尝试了不同的选项，我的非忍者技能但没有效果。当滚动条回到顶部时，有关如何使其淡出的任何想法？

感谢。

Answer 1

在第一个处理程序内部执行相反操作的另一个滚动处理程序或另一个滚动处理程序应该执行此操作（您希望测试scrollTop() < 400。

$(window).bind('scroll', function(){
    if($(this).scrollTop() < 400) {
        $("#gototop").animate({
            opacity: 0,
        }, 3400);
    }
});

但请注意，这是在每次调用scroll事件时设置它的动画，你可能只想做一次（当滚动超过400px阈值时），所以可能添加一个变量来记录当前状态{{1 }}

#gototop

Answer 2

我最终使用了一个名为waypoints的插件来处理滚动位置。

基于滚动位置的不透明度

2 个答案: