Scroll Website - I want my navigation div change color when scroll pass a section

Question

I am not using any frameworks. How can I make my navigation div change color each time I scroll through a section on my page?

This is my web page: http://www.noteid.com/scl

As you can see there is a nav on the left and position: fixed; . How can I do this in Javascript?

Answer 1

It you need to use the scroll event.

window.onscroll = function() {
    var element = document.getElementById('testDiv');
    if (window.pageYOffset > 400 && window.pageYOffset < 800) 
        element.style.backgroundColor = 'blue';
};

This uses the pageYOffset property to set the background property.

http://jsfiddle.net/N82fS/9/

Answer 2

I would use Bootstrap's ScrollSpy to do things like this.

http://getbootstrap.com/javascript/#scrollspy