22

ウィンドウ イベント (ロード、サイズ変更、スクロール) で jquery 関数を実行するにはどうすればよいですか?

これは、divが表示可能かどうかを検出しようとしている私のコードです。次に、それがいくつかのajaxコードを実行している場合...

<script>
function topInViewport(element) {
    return $(element).offset().top >= $(window).scrollTop() && $(element).offset().top          <= $(window).scrollTop() + $(window).height();
 }

 </script>

<script>
topInViewport($("#mydivname"))
{
// ajax code goes here
}
4

3 に答える 3

116

以下を使用できます。windowこれらはすべて、オブジェクトを jQuery オブジェクトにラップします。

ロード：

$(window).load(function () {
    topInViewport($("#mydivname"))
});

サイズ変更:

$(window).resize(function () {
   topInViewport($("#mydivname"))
});

スクロール

$(window).scroll(function () {
    topInViewport($("#mydivname"))
});

または、次を使用してそれらすべてにバインドしますon。

$(window).on("load resize scroll",function(e){
    topInViewport($("#mydivname"))
});
于 2013-03-27T17:20:18.353 に答える
22

リスナーを1つの共通関数にバインドできます-

$(window).bind("load resize scroll",function(e){
  // do stuff
});

または別の方法 -

$(window).bind({
     load:function(){

     },
     resize:function(){

     },
     scroll:function(){

    }
});

または、を使用する代わりに、bind を直接マップとして.bind()使用できます。そして、おそらく将来のjqueryバージョンには存在しないでしょう。.on()on().bind()

$(window).on({
     load:function(){

     },
     resize:function(){

     },
     scroll:function(){

    }
});
于 2013-03-27T17:21:51.547 に答える
4

イベント内で関数を呼び出すだけです。

ロード：

$(document).ready(function(){  // or  $(window).load(function(){
    topInViewport($(mydivname));
});

サイズ変更:

$(window).resize(function () {
    topInViewport($(mydivname));
});

スクロール：

$(window).scroll(function () {
    topInViewport($(mydivname));
});

または、すべてのイベントを 1 つの関数にバインドします

$(window).on("load scroll resize",function(e){
于 2013-03-27T17:21:15.890 に答える