0

I have some divs, I need to trigger an action (float another div or fire an alert for example) when a certain div is viewed or scrolled to.. What is the best approach to do so?

hamama
  • 121
  • 2
  • 11
  • 1
    See http://stackoverflow.com/questions/123999/how-to-tell-if-a-dom-element-is-visible-in-the-current-viewport – akdh Mar 23 '13 at 20:27

2 Answers2

0

What you mean by "viewed" I have no idea - but here is how you would do it when the user puts their mouse over the div:

function isScrolledIntoView(elem) {
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();
    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();
    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}

$(window).scroll(function() {
    if(isScrolledIntoView(myelement)) {
        // in view
    } else {
        // not in view
    }
});

Credit to Is there a way to detect when an HTML element is hidden from view?

Community
  • 1
  • 1
What have you tried
  • 11,018
  • 4
  • 31
  • 45
  • by viewed I meant scrolled to/ came into the view.. Unfortunately I tried this but it didn't work! – hamama Mar 23 '13 at 20:25
0

You can probably use the Bullseye jQuery plugin which adds adds enterviewport and leaveviewport events to elements.

excentris
  • 471
  • 1
  • 7
  • 25