0

私は次のことを達成しようとしています:

私は div を持っています。それがページのほぼ上部にあるとき、この div の上部に自動的にスクロールしたいと考えています。

これが私がこれまでに持っているスクリプトです。ご覧のとおりです（希望）。#plus がページの上部から 250 ～ 20 px の場合、#editions をページの上部に配置するアニメーションを実行したいと考えています。しかし、アニメーションは何度も実行され、ただ進み続けます。250～20の範囲の値ごとに発動していると思うので、基本的には230回。これについて正しい方法で行っているかどうかはわかりません。

// Scroll to Editions //
function scrollEditions(){
    $('html, body').animate({
    scrollTop: $("#plus").offset().top
}, 1200, 'easeOutQuint').delay(200).animate({
    scrollTop: $("#editions").offset().
    }, 800, 'easeOutQuint');
};

// Scrolling check //
function showHideTitles(){
    // Distance of elements frop top //
    var Ptop2 = Math.round($('#plus').offset().top - $(window).scrollTop());        // PLUS from top

    // Auto scrolling //
    if (Ptop2 <= 240 && Ptop2 >= 20){
        scrollEditions();
    }
};

$(window).scroll(function(){
    showHideTitles()
});
4

1 に答える 1

0

独自の実装を展開している場合は、デバウンス関数を使用して、特定の間隔内でアクションをトリガーする必要があります。

http://underscorejs.org/#debounce

http://jsfiddle.net/puleos/j67eG/40/

 var fn = _.debounce(showHideTitles, 300);

 $(window).scroll(fn);

jquery ライブラリでスクロール イベントのウェイポイントを処理する場合は、非常に優れています。
http://imakewebthings.com/jquery-waypoints/

于 2013-04-25T16:10:10.967 に答える