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?

$(window).scroll(function() {

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

   if (scroll >= 1000) {



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() {
				if (i < els.length) setTimeout(f, 400);


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;


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




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
// Call the loop for the first time


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
    • Most Online

    Newest Member
  • Forum Statistics

    • Total Topics
    • Total Posts