Convert a function if the item is completely in the viewport (in real time)

Question

I tried using the jQuery plugin in the viewport to determine if the item is in the viewport.

It works, but it does not update.

He recommends ScrollStop . I add it, but it does not work.

I just put my code here:

$(document).ready(function() { $(window).bind("resize scrollStop", function() { $("div").withinViewport().append("<span>hi</span>"); }); }); 

(plus, it uses the bind method, so it is a bit outdated ..)

So it might be simple, but I didn’t get it working.

I am new to jQuery and javascript, so .. It can be very simple.

Here is the site with the code and everything

edit: works when resized! but not on a scroll.

Answer 1

From here

jQuery - associate event with scroll stop

 $.fn.scrollStopped = function(callback) { $(this).scroll(function(){ var self = this, $this = $(self); if ($this.data('scrollTimeout')) { clearTimeout($this.data('scrollTimeout')); } $this.data('scrollTimeout', setTimeout(callback,250,self)); }); }; $(window).scrollStopped(function(){ $("div").withinViewport().append("<span>hi</span>"); }); 

How it works.

The function first clears any timeout associated with the scrollTimeout data scrollTimeout .

He thinks he is creating a new element there with an interval of 250 ms with the transferred function.

Thus, while the scroll moves, it always clears the function from starting and restarts it to start “a little”.

When scrolling stops, then it cannot clear the function for the function to execute.

Nice trick.