Q:

js: change style based in scroll position

I have this code to change the background color of an element (which works fine)
<script>
window.onscroll = function() {
    if(document.body.scrollTop == 0) {
       jQuery("header#main-header").css('background-color', 'red');
    }
}
</script>

Problem is that I need to set the color to red only if the page scroll is between 0 and 100 and set the color to yellow if is bigger than 100.
I tried this in this page: http://temporal-1.d246.dinaserver.com/ but not working:
<script>
window.onscroll = function() {
    if(document.body.scrollTop <= 99) {
       jQuery("header#main-header").css('background-color', 'red');
    }
    if(document.body.scrollTop >= 100) {
       jQuery("header#main-header").css('background-color', 'yellow');
    }
}
</script>

A:

Well you need to calculate top offset a little differently
window.onscroll = function() {
    var doc = document.documentElement;
    var top = (window.pageYOffset || doc.scrollTop)  - (doc.clientTop || 0);
    if(top <= 99) {
       jQuery("header#main-header").css('background-color', 'red');
    }
    else {
       jQuery("header#main-header").css('background-color', 'yellow');
    }
} 

