22

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
}

3 Answers 3

119

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"))
});
9
  • @user2152326 Yeah you can, go for it :) Mar 27, 2013 at 17:22
  • @user2152326 It's not needed, but it's the event object. You don't really need to use it. You can read about it here developer.mozilla.org/en-US/docs/DOM/event Mar 27, 2013 at 17:40
  • I still need two scripts though right? But I should just add this $(window).on("load resize scroll",function(e) to the second script I posted? Mar 27, 2013 at 17:46
  • @user2152326 With that on, you can only have one. Mar 27, 2013 at 18:02
  • Won't $(window).on("load resize scroll",function(e){ topInViewport($("#mydivname")) }); call the method topInViewport() twice on page load? Nov 8, 2013 at 22:47
23

You can bind listeners to one common functions -

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

Or another way -

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

     },
     resize:function(){

     },
     scroll:function(){

    }
});

Alternatively, instead of using .bind() you can use .on() as bind directly maps to on(). And maybe .bind() won't be there in future jquery versions.

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

     },
     resize:function(){

     },
     scroll:function(){

    }
});
2
  • To my understanding is this not the better answer? May 22, 2017 at 12:45
  • 1
    @AaronMatthews Just different practice of writing code. May 26, 2017 at 5:22
4

just call your function inside the events.

load:

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

resize:

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

scroll:

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

or bind all event in one function

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

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.