Question

I’ve seen this question here and it was pretty helpful but how about if the navigation is horizontally. I would like to change class into active on my active button by the moment the div scrolls into view from a horizontally navigation.

Right now the website I’m working on, scrolls both vertically and horizontally and by the time it reaches a div that has others divs on the same axis with it, it show the first div from the html selected, even though is not in current view.

So how can I check both axis and toggle class when div is actually in window view?

Thank you

Answer 1

You can catch the scroll event like this.

$('body').scroll(function(){

});

Following line gives you the scroll position.

$(window).scrollTop();
$(window).scrollLeft();

To notice the entering div compare the scroll-value and the div-offset every time the body is scrolled.

if( $('#div').offset().left < $(window).scrollLeft() )
{
    alert('I am in your view!');
}

Maybe you have to add the body width to the calculation.

To toggle a class there is a function named toggleClass. You can user addClass and removeClass too.