jQuery: How can I trigger an event when a div comes into view?

Question

Is there some way I can fire an event with jQuery when the page scrolls far enough for a div to come into view?

score 16 · Answer 1 · edited Feb 03 '17 at 04:13

If you only need to fire once:

$(window).scroll(function(){
  // This is then function used to detect if the element is scrolled into view
  function elementScrolled(elem)
  {
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();
    var elemTop = $(elem).offset().top;
    return ((elemTop <= docViewBottom) && (elemTop >= docViewTop));
  }

  // This is where we use the function to detect if ".box2" is scrolled into view, and when it is add the class ".animated" to the <p> child element
  if(elementScrolled('. box2')) {


  // Your function here

  }
});

Full answer: https://www.thewebtaylor.com/articles/how-to-detect-if-an-element-is-scrolled-into-view-using-jquery

As an optimization, I think the `elementScrolled` function should be moved out of the scroll callback: 1. There's no need to redefine the function every single frame that the browser window scrolls--hugely wasteful; and 2. It looks like a handy function for other items to use. — whiterook6, Mar 24 '21 at 20:01

score 14 · Accepted Answer · edited May 23 '17 at 12:32

14

I think you will have to hook into the scroll event and manually check. Here is a similar question:

Check if element is visible after scrolling

Hope that helps.

Bob

edited May 23 '17 at 12:32

Community

1
1

answered Jan 29 '11 at 16:01

rcravens

8,320
2
33
26

score 4 · Answer 3 · answered Jun 19 '14 at 19:05

4

The waypoints plugin covers this and more. http://imakewebthings.com/jquery-waypoints/

Docs: http://imakewebthings.com/jquery-waypoints/#docs

eg:

$('.someSelector').waypoint(function(direction){
//do stuff 
},{
 //bottom-in-view will ensure event is thrown when the element's bottom crosses
 //bottom of viewport.
 offset: 'bottom-in-view'
});

answered Jun 19 '14 at 19:05

Gokul

2,306
2
17
10

Good plugin - worked for me – Yarin Apr 03 '17 at 16:42

score 3 · Answer 4 · answered Feb 10 '15 at 06:08

3

A jQuery plugin that adds a bindable 'inview' event for detecting when an element is scrolled into view.

https://github.com/protonet/jquery.inview

answered Feb 10 '15 at 06:08

Andrew Bucklin

699
8
19

score 0 · Answer 5 · answered Oct 20 '14 at 13:07

if you want to trigger a function when bottom of view, hit top of your content, you can use this function:

$('.ModuleWrapper').waypoint(function (direction) {
    // Codes Here
}, {
    offset: function () {
        return $(this).height();
    }
});

or when bottom of view, hit bottom of your content, you can use this function too:

$('.ModuleWrapper').waypoint(function (direction) {
    // Codes Here
}, {
    offset: function () {
        return -1 * $(this).height();
    }
});

it uses waypoint

jQuery: How can I trigger an event when a div comes into view?

5 Answers5

Linked

Related