Question

我有一个带有固定位置的滚动到顶部按钮。滚动400px后，我希望此按钮从屏幕底部滑入。我可以让它与fadein和fadeout一起工作。这是按钮的代码。

<a href="#top" id="scrolltop"><img src="images/upbutton.png" alt="scroll to top"/></a>

#scrolltop {
position:fixed;
height:38px;
width:38px;
background-color:#444;
right:15px;
bottom:15px;
z-index:100;
} 



$(document).scroll(function() {
        var y = $(this).scrollTop();
        if (y > 1000) {
            $('#scrolltop').animate({bottom: 100});
        } else {
            $('#scrolltop').animate({bottom: -100});
        }
});

Answer 1

一个问题是你正在测试1000而不是400。

除了在滚动时多次触发scroll事件。并且因为jquery的animate函数是可堆叠的，所以在每个方向上都有多个动画，并且在等待每个方向结束时会有很长的延迟..

所以你需要一个更严格的逻辑......

如果元素已经设置了动画，请不要设置动画，请将:animated jquery selector与.is() method
在尝试对其进行动画处理之前，还要检查该元素是否已经在正确的位置，添加/删除class作为执行此操作的标记
也可以缓存重复使用的变量

所以脚本变成了

var scr = $('#scrolltop');
$(document).scroll(function () {
    var y = $(this).scrollTop();
    if (y > 400) {
        if (scr.is('.off') && !scr.is(':animated')) {
            scr.animate({bottom: 100}, function () {
                scr.removeClass('off');
            });
        }
    } else {
        if ((!scr.is('.off')) && (!scr.is(':animated'))) {
            scr.animate({bottom: -100}, function () {
                scr.addClass('off');
            });
        }
    }
});

演示 http://jsfiddle.net/gaby/7eYdB/

使用Jquery在固定位置滑入div

1 个答案: