Question

我有一个固定的div，我用作背景。我试图根据页面的哪个部分来更改颜色。

这是我的小提琴。

我目前在向上滚动时无法正常工作。如果高度为＆gt;我尝试将if语句更改为这个div＆amp;＆amp; ＆LT;这个div +下一个div，但仍然有问题。

当我向上滚动并添加淡入淡出过渡时，我试图让它工作。任何帮助。

$(window).scroll(function(){
var splashHeight = $('#splash').height();
var sec1height = $('#section1').height();
var sec2height = $('#section2').height();
if($(window).scrollTop() > splashHeight) {
    $('#background').addClass('redBg');
}
if ($(window).scrollTop() > sec1height + splashHeight){
    $('#background').removeClass('redBg')
    $('#background').addClass('blueBg')
}
if ($(window).scrollTop() > splashHeight + sec1height + sec2height){
    $('#background').removeClass('blueBg')
    $('#background').addClass('greenBg')
}
})

我不确定这是否是最好的方法。任何帮助或建议将不胜感激。

Answer 1

问题是你刚刚定义了当$（window）.scrollTop（）的值大于元素高度时会发生什么，但是如果scrolltop（）变小则会发生什么

这应该有效：

$(window).scroll(function(){
    var splashHeight = $('#splash').height();
    var sec1height = $('#section1').height();
    var sec2height = $('#section2').height();
    var scrolltop = $(window).scrollTop();
    if(scrolltop < splashHeight) {
       $('#background').attr('class', ''); 
    } else
    if(scrolltop > splashHeight && scrolltop < sec1height + splashHeight) {
        $('#background').attr('class', '');
        $('#background').addClass('redBg');
    } else 
    if (scrolltop > sec1height + splashHeight && scrolltop < splashHeight + sec1height + sec2height){
        $('#background').attr('class', '');
        $('#background').addClass('blueBg')
    } else
    if (scrolltop > splashHeight + sec1height + sec2height){
        $('#background').attr('class', '');
        $('#background').addClass('greenBg')
    }
})

http://codepen.io/anon/pen/ogMGxP

Jquery - 修改每个部分的背景颜色

1 个答案: