在窗口事件上运行Jquery函数：加载，调整大小和滚动？ [英] Run Jquery function on window events: load, resize, and scroll?

问题描述

这里是我的代码
我试图检测一个窗口事件的jquery函数：load，resize，and scroll？如果一个div可见，然后运行一些ajax代码...

---

 <脚本> 
 function topInViewport（element）{
 return $（element）.offset（）。top> = $（window）.scrollTop（）&& $（element）.offset（）。top< = $（window）.scrollTop（）+ $（window）.height（）; 
} 
 
< / script> 
 
< script> 
 topInViewport（$（＃mydivname））
 {
 // ajax代码在这里
} 
  

解决方案

您可以使用以下内容。它们都将窗口对象封装到一个jQuery对象中。

载入：

  $（窗口）。 load（function（）{
 topInViewport（$（＃mydivname））
}）; 
  

调整大小：

  $（window）.resize（function（）{
 topInViewport $（＃mydivname））
}）; 
  

Scroll

  $（window）.scroll（function（）{
 topInViewport（$ （#mydivname））
}）; 
  

或者使用 on ：

  $（window）.on（load resize scroll，function（e）{
 topInViewport（$（＃mydivname））
}）; 
  

How do I run a jquery function on window events: load, resize, and scroll?

Here is my code I'm trying to detect if a div is viewable and then if it is run some ajax code...

---

<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
}

解决方案

You can use the following. They all wrap the window object into a jQuery object.

Load:

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

Resize:

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

Scroll

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

Or bind to them all using on:

$(window).on("load resize scroll",function(e){
    topInViewport($("#mydivname"))
});

这篇关于在窗口事件上运行Jquery函数：加载，调整大小和滚动？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！