jquery trigger function when element is in viewport

Question

I'd like to trigger an event when jquery.localscroll reaches a certain point of the document, a div.

Lets say we're scrolling vertically from the top div to the third. When it gets there, then the action schould trigger.

score 43 · Accepted Answer · edited Jun 20 '20 at 09:12

43

jQuery Waypoints plugin http://imakewebthings.github.com/jquery-waypoints/ should do the trick

UPDATE

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>jQuery Waypoints Plugin - Test</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js" type="text/javascript"></script>
    <script src="http://imakewebthings.github.com/jquery-waypoints/waypoints.min.js" type="text/javascript"></script>
    <style type="text/css">
        #mydiv {background-color:#FF0000; margin:1500px 0;}
    </style>
</head>
<body>

<div id="mydiv">
    Content goes here
</div>

<script type="text/javascript">
$(function() {
       $('#mydiv').waypoint(function() {
         window.location.href = 'http://google.com';
         }, {
           offset: '100%'
         });
    });
</script>
</body>
</html>

edited Jun 20 '20 at 09:12

Community

1
1

answered May 06 '11 at 12:14

Pav

2,288
4
22
25

The plugin is pretty straight forward and easy to use. Have you got any code that you've done so far? – Pav May 06 '11 at 12:56
Looks like this does the trick, but it's pretty hard to understand. I'll have a look at it. What I want to accomplesh is the following: When the waypoint is reached, the browser should redirect to another page. Any get started tips? – Aeonius May 06 '11 at 12:58
@ Pav: I've got a test page using the localscroll plugin. Need to see it? – Aeonius May 06 '11 at 12:59
Yes it is, but where do I call this code? And do I need to add something in the waypoints.js file? – Aeonius May 06 '11 at 13:07
I've just posted complete code, should do the trick. You can also use offset option `offset: '50%' // middle of the page` – Pav May 06 '11 at 13:38
It does... in the example... but when I use the code with in my html, it doesn't. It seems that when scrolling down to the div using localscroll, it doesn't work. I've uploaded the testpage I have to http://www.jorisvandijk.com/waypoints/index.htm and I set div7 as waypoint. Any idea's? (Sorry to take up so much of your time!) – Aeonius May 06 '11 at 13:45
just set the `offset: 100%` as option. That will execute as soon as the div is visible in the view port. Updated the coded – Pav May 06 '11 at 13:55
Ok, it works... however, when I go to another div (i.e. div 8) it also redirects eventhough the linked div isn't in the viewport. Also, scrolling doesn't function anymore when clicking back after the redirect... – Aeonius May 06 '11 at 14:03
`.waypoint('remove')` Passing the string `'remove'` to `.waypoint` unregisters the elements as waypoints and wipes any custom options, but leaves the waypoint.reached events bound. Calling `.waypoint `again in the future would reregister the waypoint and the old handlers would continue to work. Refer to http://imakewebthings.github.com/jquery-waypoints/#waypoint-destroy – Pav May 06 '11 at 14:06
But it still doesn't explain why the function is called when the div isn't in view... – Aeonius May 06 '11 at 14:14
Uncaught TypeError: r.getClientRects is not a function – djack109 Jun 26 '20 at 10:59

score 19 · Answer 2 · edited Jul 31 '13 at 01:29

19

You may want to also see the following tiny plugin, it's help me in the past and it's pretty clean:

http://remysharp.com/2009/01/26/element-in-view-event-plugin/

Example Usage:

$('div').bind('inview', monitor);
function monitor(event, visible)
{
    if(visible)
    {
      // element is now visible in the viewport
    }
    else
    {
      // element has gone out of the viewport
    }
}

edited Jul 31 '13 at 01:29

Chris Villa

3,901
1
18
10

answered May 06 '11 at 13:42

RobertPitt

56,863
21
114
161

score 6 · Answer 3 · answered Aug 01 '11 at 09:43

6

jQuery Bullseye: http://static.pixeltango.com/jQuery/Bullseye/ does also a great job on viewport detection!

answered Aug 01 '11 at 09:43

Benny Code

51,456
28
233
198

score 4 · Answer 4 · edited Dec 11 '16 at 04:48

https://github.com/stutrek/scrollMonitor

var scrollMonitor = require("./scrollMonitor"); // if you're not using require, you can use the scrollMonitor global.
var myElement = document.getElementById("itemToWatch");

var elementWatcher = scrollMonitor.create( myElement );

elementWatcher.enterViewport(function() {
    console.log( 'I have entered the viewport' );
});
elementWatcher.exitViewport(function() {
    console.log( 'I have left the viewport' );
});

elementWatcher.isInViewport - true if any part of the element is visible, false if not.
elementWatcher.isFullyInViewport - true if the entire element is visible [1].
elementWatcher.isAboveViewport - true if any part of the element is above the viewport.
elementWatcher.isBelowViewport - true if any part of the element is below the viewport.

jquery trigger function when element is in viewport

4 Answers4

UPDATE

Linked

Related