Выполнить функцию Jquery в событиях окна: загрузить, изменить размер и прокрутить?

Как запустить функцию 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
}

Ответ 1

Вы можете использовать следующее. Все они обертывают объект window в объект jQuery.

Загрузить:

$(window).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"))
});

Ответ 2

Вы можете связать слушателей с одной общей функцией -

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

Или другим способом -

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

     },
     resize:function(){

     },
     scroll:function(){

    }
});

В качестве альтернативы вместо .bind() вы можете использовать .on(), поскольку привязка напрямую сопоставляется с on(). И, возможно, .bind() не будет в будущих версиях jQuery.

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

     },
     resize:function(){

     },
     scroll:function(){

    }
});

Ответ 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){