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

Answer 2

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

}）

Answer 3

滚动时更改元素的简单执行

$(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()); 
    });
});

js：基于滚动位置更改样式

3 个答案: