Jquery js：根据滚动位置更改样式

我有这段代码来更改元素的背景色（效果很好）

window.onscroll=函数（）{
if（document.body.scrollTop==0）{
jQuery（“header#main header”）.css（'background-color'，'red'）；
}
}

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

我在此页面中尝试了以下操作：但不起作用：

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

window.onscroll=函数（）{
如果（document.body.scrollTop=100）{
jQuery（“header#main header”）.css（'background-color'，'yellow'）；
}
}

您需要稍微不同地计算

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

window.onscroll=function（）{
var doc=document.documentElement；
var top=（window.pageYOffset | | doc.scrollTop）-（doc.clientTop | 0）；
if（top
jQuery（document）.ready（function（）{
jQuery（“body”）.css（“背景色”、“红色”）；
jQuery（窗口）.滚动（函数（）{
if（jQuery（document）.scrollTop（）在滚动时更改元素的简单执行

$(function () {
    $(document).scroll(function() {
        var $nav = $("class name");
        // $nav.height() can be changed to whatever height you want to start the change effect
        $nav.toggleClass('scrolled', $(this).scrollTop() > $nav.height()); 
    });
});

你能发布一个代码片段来复制这个问题吗？代码在这个页面中是活动的：在你的代码中有一个错误：$NaV。此外，考虑为前端功能添加代码片段而不是原始代码，以及对它的一些解释。
jQuery(document).ready(function(){
jQuery("body").css('background-color', 'red');
jQuery(window).scroll(function(){
    if ( jQuery(document).scrollTop() <= 99 ) {
         jQuery("body").css('background-color', 'red');
    } else {
        jQuery("body").css('background-color', 'yellow');
    }
})

$(function () {
    $(document).scroll(function() {
        var $nav = $("class name");
        // $nav.height() can be changed to whatever height you want to start the change effect
        $nav.toggleClass('scrolled', $(this).scrollTop() > $nav.height()); 
    });
});