4

ユーザーがページを下にスクロールしたときに、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秒後に再び。私のコードの何が問題なのかを見つけるための助けをいただければ幸いです。

4

2 に答える 2

12

アニメーションがキューに入れられています。次を使用して.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/

于 2013-02-22T14:34:59.713 に答える
0

Something like this:

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

Not tested.

于 2013-02-22T14:41:01.603 に答える