javascript - 在窗口事件上运行 Jquery 函数：加载、调整大小和滚动？

Question

如何在窗口事件上运行 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
}

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()as 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){