Fire event when div is visible to visitor with jQuery?

Question

The function: I want to change the class of a certain item when a user see a certain div (scrolls down to it).

How I do it now: I'm using this fine script (http://code.google.com/p/jquery-appear/) wich works really fine to just fire an jquery event when a div gets visible to the user. However it only fires once. So if you scroll down the page the jquery gets executed fine. But if I scroll up and then down again it doesent fire. This is my jquery:

$('#myDiv').appear(function() {
        $("#aDiv").addClass("active");
});

What I want to do: Make the script execute everytime "myDiv" appear and not only the first.

Does anyone have an idea on how I could do this?

score 7 · Accepted Answer · answered Nov 08 '11 at 12:49

7

to judge the div is visible or not, you can:

$(window).scroll(function(event) {
    console.log($(".target").offset().top < $(window).scrollTop() + $(window).outerHeight());
});

so, i don't think you need any plugin.

just judge it by the expression like:

if($(".target").offset().top < $(window).scrollTop() + $(window).outerHeight()) {
    // something when the .target div visible
} else {
    // something when the .target div invisible
}

answered Nov 08 '11 at 12:49

Ya Zhuang

4,652
31
40

When using your script i get errors in the console who says like this: a.style is undefined Weird? – Paparappa Nov 08 '11 at 13:01
@Paparappa according to http://bugs.jquery.com/ticket/9434 it's fixed in jQuery 1.7 :) – Ya Zhuang Nov 08 '11 at 13:25

score 4 · Answer 2 · edited Jan 04 '12 at 01:14

4

By looking at the source code of the jquery-appear plugin, it is possible to pass the argument one, to fire the event one time only (one: true), or every time it appears (one: false)

$('#myDiv').appear(function() {
    $("#aDiv").addClass("active");
}, {
    one: false
});

edited Jan 04 '12 at 01:14

Soundlink

3,915
2
28
36

answered Nov 08 '11 at 12:47

christianvuerings

22,500
4
23
19

This code didn't work however if i went in to the appear .js file and changed one to false my problem was solved. So your answer did more than inspiring me to solve it. – Paparappa Nov 08 '11 at 13:23

score 3 · Answer 3 · answered Nov 08 '11 at 12:41

I use a similar plugin but this uses the bind method and uses an event -> http://remysharp.com/2009/01/26/element-in-view-event-plugin/

Sample usage :

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

score 1 · Answer 4 · edited May 23 '17 at 11:52

This would probably be useful for you.

Anyhow, you could probably do it without a plug-in and with a simple expression instead:

var elem_top    = $("some_element").offset().top;
var elem_height = $("some_element").height();
var wind_height = $(window).height();
var scrollTop   = $(window).scrollTop;

if (elem_top > (wind_height + scrollTop) &&
   !(elem_top + elem_height) < wind_scrollTop) 
{
    //The element is inside the screen (e.g. it is directly visible)
}

Fire event when div is visible to visitor with jQuery?

4 Answers4

Linked