Jump to content
Fuzzy Logic

Jquery viewport trigger

Recommended Posts

Is there a way to make this run when it comes into view?

Or more to the point when it reaches a designated amount of pixels prior to it being in view?

<script>
$(window).scroll(function() {

   var scroll = $(window).scrollTop();

   if (scroll >= 1000) {
       $(".animate").addClass("expand-images");
   }
});

</script>

Thanks

Share this post


Link to post
Share on other sites

did it in case anyone was wondering.. 

$(window).scroll(function() {
	function elementScrolled(elem) {
		var docViewTop = $(window).scrollTop();
		var docViewBottom = docViewTop + $(window).height();
		var elemTop = $(elem).offset().top;
		return ((elemTop <= docViewBottom) && (elemTop >= docViewTop));
	}
	
	if (elementScrolled('.animate')) {
		var els = $('.animate'),
			i = 0,
			f = function() {
				$(els[i++]).addClass('expand-images');
				if (i < els.length) setTimeout(f, 400);
			};
		f();
	}
});

 

Share this post


Link to post
Share on other sites

This method returns true if the current element is in the viewport

jQuery.fn.isInViewport = function() {
	var elementTop = jQuery(this).offset().top;
	var elementBottom = elementTop + jQuery(this).outerHeight();
	var viewportTop = jQuery(window).scrollTop();
	var viewportBottom = viewportTop + jQuery(window).height();
	return elementBottom > viewportTop && elementTop < viewportBottom;
};

Usage:

if (jQuery('.my-element').isInViewport()) {
	//do something
}

DEMO:

https://jsfiddle.net/Nillervision/fmgjbkps/

 

Note that this example is not listening for scroll events (which can be heavy for the browser) Instead the function is running on each animation frame:

I'm not 100% sure but I think this give you a better performance because each frame is parsed by the browsers js engine anyway, and the interval between the frame "events" is determined by the device itself:

var scroll = window.requestAnimationFrame;
function loop() {
  if (jQuery('.my-element').isInViewport()) {
    //do something
  }
  // Recall the loop
  scroll(loop)
}
// Call the loop for the first time
loop();

 

To support old browsers you can fallback to vendor prefixes or even a timer

var scroll = window.requestAnimationFrame ||
  window.webkitRequestAnimationFrame ||
  window.mozRequestAnimationFrame ||
  window.msRequestAnimationFrame ||
  window.oRequestAnimationFrame ||
  // fallback to timer
  function(callback) {
    window.setTimeout(callback, 1000 / 60)
};

 

Edited by Nillervision

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing

    No registered users viewing this page.

  • Member Statistics

    • Total Members
      58,259
    • Most Online
      4,970

    Newest Member
    BarbaraBlanc
    Joined
  • Forum Statistics

    • Total Topics
      65,768
    • Total Posts
      453,362
×