2

I'm building a one-page website, each different "page" is a different div. Each div is placed below one another, so only one div is viewable at time. I want to be able to tell when a user scrolls to, and is viewing, one of the divs, and based on which div ID alter the CSS of a correpsonding link in my navigation. Any guidance is appreciated. Thanks!

Alix Përry
  • 449
  • 2
  • 7
  • 14
  • 2
    listen to the scroll event. When scroll top is x, do y. – Kevin B Sep 03 '13 at 18:33
  • i think this is what you want => http://stackoverflow.com/questions/487073/check-if-element-is-visible-after-scrolling, or at least some modification of it – PlantTheIdea Sep 03 '13 at 18:37

2 Answers2

3

Check out this plugin - it does exactly what you described

http://imakewebthings.com/jquery-waypoints/

Jonathan Crowe
  • 5,793
  • 1
  • 18
  • 28
1
$(window).on("scroll", function(){
    var allDivs = $("div");
    for(var i = allDivs.length - 1; i >= 0; i--){
        if($(allDivs[i]).position().top < document.body.scrollTop + 100){
            $("span").text(allDivs[i].innerText);
            break;
        }
    }
});

http://jsfiddle.net/AzMxG/

gp.
  • 8,074
  • 3
  • 38
  • 39