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')
            });
        }
    }
});

DEMO：http://jsfiddle.net/MkJwm/

Answer 2

这样的事情：

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

未经测试。

当向下滚动页面时，jQuery使div滑入

2 个答案: