Triggering jquery event when an element appears on screen

Question

I want to show a fade effect as soon as the element appears on screen. There is a lot of content before this element so if I trigger the efect on document.ready, at certain

Answer 1

A quick search turned up this viewport extension for jQuery that will allow you to check an element's visibility in the viewport. If your element is not in the viewport, don't do your fade-in animation.

Answer 2

If you want a simple and working sollution:

function elementInView(elem){
  return $(window).scrollTop() < $(elem).offset().top + $(elem).height() ;
};

$(window).scroll(function(){
  if (elementInView($('#your-element')))
  //fire at will!
    console.log('there it is, wooooohooooo!');
});

Answer 3

If you're looking to fire an event when a specified, or target, element scrolls into view, you can do this by determining the following values:

1. the window height
2. the scroll distance value from the top of the window
3. the specified, or target, element's distance from the top of the window

Consider the following:

jQuery(window).on('scroll', function(){

    var elValFromTop = Math.ceil(jQuery('.target-el').offset().top),
        windowHeight = jQuery(window).height(),
        windowScrollValFromTop = jQuery(this).scrollTop();

   // if the sum of the window height and scroll distance from the top is greater than the target element's distance from the top, it should be in view and the event should fire, otherwise reverse any previously applied methods
   if ((windowHeight + windowScrollValFromTop) > elValFromTop) {
        console.log('element is in view!');
        jQuery('.target-el').addClass('el-is-visible');
   } else {
        jQuery('.target-el').removeClass('el-is-visible');
   }

});

Code Snippet Demonstration:

The below snippet demonstrates a working example of a common issue: fixing an element to the viewport when a specified element scrolls into view.

/* Sticky element on-scroll */
jQuery(window).on('scroll', function(){

    var elValFromTop = Math.ceil(jQuery('.target-el').offset().top),
        elHeight = jQuery('.target-el').outerHeight(),
        windowHeight = jQuery(window).height(),
        windowScrollValFromTop = jQuery(this).scrollTop(),
        headerHeightOffset = jQuery('.fixed-header').outerHeight();
        
   if ((windowHeight + windowScrollValFromTop) > elValFromTop) {
        console.log('element is in view!');
        console.log(headerHeightOffset);
        jQuery('.will-change-el').addClass('fixed-el').css('top',headerHeightOffset).text('fixed');
   } else {
        jQuery('.will-change-el').removeClass('fixed-el').css('top','0').text('static');
   }
   
   // using template literals for multi-line output formatting
   // comment out to observe when target element comes into view
   console.log(`
        how far is the target element from the top of the window: ${elValFromTop}
        what is the target element's height: ${elHeight}
        what is the window height: ${windowHeight}
        what is the window's scroll value distance from the top: ${windowScrollValFromTop}
        what is the sum of the window height and its offset value from the top: ${windowHeight + windowScrollValFromTop}
        `);
        
});

/* || Reset & Defaults */
body {
  margin: 0;
}

* {
  box-sizing: border-box;
  font-family: arial;
}

/* || General */
.target-el {
  border-top: 1px solid #ccc;
}

.target-el,
.will-change-el {
  transition: .7s;
  text-align: center;
  background: #ededed;
  border-bottom: 1px solid #ccc;
}

.fixed-el {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
}

.fixed-header {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  height: 100px;
  text-align: center;
  background: #ededed;
  border-bottom: 1px solid #ccc;
  z-index: 9;
}

.buffer-el {
  height: 1000px;
  padding-top: 100px;
  background: whitesmoke;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="fixed-header">
  <h1>Fixed Header</h1>
</div>
<div class="buffer-el">
  <div class="will-change-el">static</div>
</div>
<div class="target-el">the target element</div>

Sandbox Example: CodePen

NOTE:
This will only apply to scroll actions on the document and not to any nested elements contained within a scroll view pane.

Answer 4

I think you're referring to the jQuery plugin "Lazy Load": http://www.appelsiini.net/2007/9/lazy-load-images-jquery-plugin

From looking at the source code, it looks like the plugin is doing something like this:

$('#item').one('appear', function () {
    // Do stuff here
});

Answer 5

Jquery.appear plugin is the best way to solve this problem.

demo.

Answer 6

This one works better for me then the others in this post: http://www.teamdf.com/web/jquery-element-onscreen-visibility/194/

Usage is simple:

$('#element').visible()

You can see how this plugin is used to create your effect here:

http://css-tricks.com/slide-in-as-you-scroll-down-boxes/

function viewable() {
    $(".module").each(function(i, el) {
        var el = $(el);
        if (el.visible(true)) {
            el.addClass("come-in");
        });
    }
$(window).scroll(function() {
    viewable();
});
$(window).blur(function() {
    viewable();
});

If u use tabs. (for example jQuery UI tabs) you must check if tab is active.

$(window).scroll(function() {
    if($('#tab-1').hasClass('active')) {
        viewable();
    }
});