jquery - jQuery在向下滚动页面时使div滑入

Question

当用户向下滚动页面时，我想让一个 div 从右侧滑到我的页面上（该 div 将包含一个将它们带回页面顶部的链接）。这是我目前正在使用的代码：

jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > 100) {
    jQuery('.totop').animate({ right: '0px' });
} else {
    jQuery('.totop').animate({ right: '-300px' });
}
});

和CSS：

.totop {
position:fixed;
bottom:50%;
right:-300px;
width:300px;
height:100px;
font-size:30px;
color:white;
background:#f18500;
}

div 的行为非常奇怪，当我向下滚动 div 大约需要 5 秒钟才能出现，然后它会出现，但看起来它正在尝试多次滑落，然后保持静止，当我滑回顶部时它消失了...但大约 5 秒后再次出现。请帮助找出我的代码有什么问题。

Answer 1

您的动画正在排队，请使用.stop()：

jQuery(window).scroll(function () {
    if (jQuery(this).scrollTop() > 100) {
        if (jQuery('.totop').hasClass('visible') == false) {
            jQuery('.totop').stop().animate({
                right: '0px'
            }, function () {
                jQuery('.totop').addClass('visible')
            });
        }
    } else {
        if (jQuery('.totop').hasClass('visible') == true) {
            jQuery('.totop').stop().animate({
                right: '-300px'
            }, function () {
                jQuery('.totop').removeClass('visible')
            });
        }
    }
});

演示：http: //jsfiddle.net/MkJwm/

Answer 2

像这样的东西：

$(window).scroll(function(){
    if ($(this).scrollTop() > 50) {
        $('#div-to-show').slideDown('slow');
    } else {
        $('#div-to-show').slideUp('slow');
    }
});

未测试。