4

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?

4 Answers 4

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
}
2
  • When using your script i get errors in the console who says like this: a.style is undefined Weird?
    – Paparappa
    Nov 8, 2011 at 13:01
  • @Paparappa according to bugs.jquery.com/ticket/9434 it's fixed in jQuery 1.7 :)
    – Ya Zhuang
    Nov 8, 2011 at 13:25
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
});
1
  • 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 8, 2011 at 13:23
3

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
  }
});
1

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)
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.