在窗口事件上运行Jquery函数：加载，resize和滚动？

如何在窗口事件上运行jquery函数：加载，resize和滚动？

这是我的代码我试图检测div是否可见，然后如果它运行一些ajax代码…

---

 function topInViewport(element) { return $(element).offset().top >= $(window).scrollTop() && $(element).offset().top <= $(window).scrollTop() + $(window).height(); }   topInViewport($("#mydivname")) { // ajax code goes here } 

Answer 1

您可以使用以下内容。 它们都将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")) }); 

Answer 2

您可以将侦听器绑定到一个常用函数 –

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

或者另一种方式 –

 $(window).bind({ load:function(){ }, resize:function(){ }, scroll:function(){ } }); 

或者，代替使用.bind()您可以使用.on()因为bind直接映射到on() 。 也许.bind()将来不会出现在jquery版本中。

 $(window).on({ load:function(){ }, resize:function(){ }, scroll:function(){ } }); 

Answer 3

只需在事件中调用您的函数。

加载：

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

调整：

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

滚动：

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

或在一个函数中绑定所有事件

 $(window).on("load scroll resize",function(e){