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

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

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

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