jquery - js : change style based in scroll position

Question

我有这段代码来更改元素的背景颜色(效果很好)

<script>
window.onscroll = function() {
    if(document.body.scrollTop == 0) {
       jQuery("header#main-header").css('background-color', 'red');
    }
}
</script>

问题是仅当页面滚动在 0 到 100 之间时我需要将颜色设置为红色，如果大于 100，则将颜色设置为黄色。

我在这个页面尝试过这个:http://temporal-1.d246.dinaserver.com/但不工作:

<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>

Answer 1

那么你需要稍微不同地计算top偏移量

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');
    }
}