Run Jquery function on window events: load, resize, and scroll?

Question

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
}

score 119 · Accepted Answer · answered Mar 27 '13 at 17:20

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"))
});

answered Mar 27 '13 at 17:20

Mathew Thompson

55,877
15
127
148

@user2152326 Yeah you can, go for it :) – Mathew Thompson Mar 27 '13 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 https://developer.mozilla.org/en-US/docs/DOM/event – Mathew Thompson Mar 27 '13 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? – user2152326 Mar 27 '13 at 17:46
@user2152326 With that `on`, you can only have one. – Mathew Thompson Mar 27 '13 at 18:02
Won't $(window).on("load resize scroll",function(e){ topInViewport($("#mydivname")) }); call the method topInViewport() twice on page load? – Morten Gustafsson Nov 08 '13 at 22:47
On mac in both Safari and Firefox it is called twice. But on Pc it is only called once. This twice call is a platform issue. – Morten Gustafsson Nov 09 '13 at 08:13
Or even simpler: `$(window).on("load resize scroll", function_name_here);` – rybo111 Jun 16 '16 at 21:40
can you add a namespace to this? – jmchauv Apr 13 '17 at 21:16
If there is already a Function/Code attached to that Event, will this allow that other code to run in addition to the function above? – Clay Nichols Jun 09 '17 at 05:09

SachinGutte · Answer 2 · 2014-05-16T06:02:23.347

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

    }
});

edited May 16 '14 at 06:02

answered Mar 27 '13 at 17:21

SachinGutte

6,947
5
35
58

To my understanding is this not the better answer? – Aaron Matthews May 22 '17 at 12:45
1

@AaronMatthews Just different practice of writing code. – SachinGutte May 26 '17 at 05:22

bipen · Answer 3 · 2016-08-01T19:45:41.517

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

edited Aug 01 '16 at 19:45

answered Mar 27 '13 at 17:21

bipen

36,319
9
49
62

Run Jquery function on window events: load, resize, and scroll?

3 Answers3

Linked