0

パララックスサイトを開発していて、スクロールが止まったときに要素を緩和したい。そこで、スクロールが停止したことを検出するプラグインを開発し、停止したら、要素の動きを滑らかにします (オブジェクトは、ユーザーがスクロールしていた方向に 5 ピクセル移動します)。機能しますが、プラグインが適用された最後の要素に対してのみです。デバッグしようとしたとき、両方の要素がまだ内部で有効であること$(window).scroll(function(event) {がわかりましたが、到達$(window).scrollStopped(function(){すると最後の要素のみが有効です。解決策はありますか？

// Scroll Direction set
var lastScrollTop = 0, scrollDirection = "";
$(window).scroll(function(event){
   var st = $(this).scrollTop();
   if (st > lastScrollTop){
       scrollDirection = "down";
   } else {
      scrollDirection = "up";
   }
   lastScrollTop = st;
});

// Scroll Stopped detection
$.fn.scrollStopped = function(callback) {          
    $(this).scroll(function(){
        var self = this, $this = $(self);
        if ($this.data('scrollTimeout')) {
          clearTimeout($this.data('scrollTimeout'));
        }
        $this.data('scrollTimeout', setTimeout(callback,250,self));
    });
};

// Smooth ending
$.fn.smoothStop = function () {
        var $this = $(this);
        $(window).scroll(function(event) {

            $(window).scrollStopped(function(){
                var top = parseFloat($this.css("top"));

                if(scrollDirection == "down")
                {
                    console.log(top, $this);
                    var new_top = top + 5;
                     $this.animate({
                        top: new_top + 'px'},
                        1000);
                }
                else{
                    var new_top = top - 5;
                     $this.animate({
                        top: new_top + 'px'},
                        1000);
                }
            });
        });


    };

$(".g6").smoothStop(); $(".g2").smoothStop();

JSFIDDLE

4

1 に答える 1

1 
// Scroll Stopped detection
$.fn.scrollStopped = function(callback) {        
    $(this).scroll(function(){                      <-- this is the window
        var self = this, $this = $(self);
        if ($this.data('scrollTimeout')) {
          clearTimeout($this.data('scrollTimeout'));    <----timeout is removed from window
        }
        $this.data('scrollTimeout', setTimeout(callback,250,self)); <----timeout is set to window
    });
};

基本的に、複数のイベントを実行しようとしていますが、それらの複数のイベントを同じメモリ位置に格納することになります。したがって、新しいエントリを追加すると、前のエントリがキャンセルされます。

于 2013-10-10T16:22:42.123 に答える