2

誰かが役に立つと思った場合に備えて、ここにプラグインがあります。http://silvestreh.github.io/onScreen/
ありがとうございます！

だから、私は最初の jQuery プラグインを書こうとしていますが、すでに最初の障害物を見つけています。プラグインは、要素が表示されているときに要素に対して何かを行うことになっています (CSS の可視性ではなく、ビューポート領域のように)

プラグインは次のようになります。

(function($) {
  $.fn.onScreen = function(options) {
    var self = $(this);

    params = $.extend({
      doIn: function(){
        console.log('on screen');
      },
      doOut: function(){
        console.log('off screen');
      },
      offset: 0
    }, options);

    return this.each(function() {
      var $el = $(this);
      var elTop = $el.offset().top;

      $(window).scroll(function() {
        var pos = $(window).scrollTop();

        if (pos + params.offset >= (elTop - $el.height()) && pos + params.offset < (elTop + $el.height())) {
          params.doIn.call($el[0]);
        } else if (pos + params.offset > (elTop + $el.height()) || pos + params.offset < elTop) {
          if (typeof(params.doOut) == 'function') {
            params.doOut.call($el[0]);
          }
        }
      });
    });
  };
})(jQuery);

そして、これは私がそれを使用しようとしている方法です：

$(function(){
  $('div').onScreen({
    doIn: function() {
      $(this).stop().animate({
        left: 20
      },500)
    },
    doOut: function() {
      $(this).stop().animate({
        left: 0
      },500)
    }
  });
});

問題は、一致する要素ではなく、(プラグイン$(this)の のため) ウィンドウ オブジェクトを参照することです。$(window).scroll()私は何を間違っていますか？代わりに、一致した要素に対して何かをしたいことをプラグインに伝えるにはどうすればよいですか?

前もって感謝します ：-）

編集: JSFiddle を作成したので、確認してください。http://jsfiddle.net/FBEFJ/3/ 編集 2: bfavaretto がコードを修正しました。作業コードで質問を更新しました。ありがとうございました！

4

1 に答える 1

1

問題は、プラグインで doIn と doOut を呼び出す方法です。thisおそらく最も簡単な解決策は、次のように値を強制することFunction.prototype.callです。

if (pos + params.offset >= (elTop - $el.height()) && pos + params.offset < (elTop + $el.height())) {
    params.doIn.call($el[0]);
} else if (pos + params.offset > (elTop + $el.height()) || pos + params.offset < elTop) {
    if (typeof(params.doOut) == 'function') {
        params.doOut.call($el[0]);
    }
}
于 2013-10-18T23:48:00.437 に答える