Jquery

Question

我有固定的 div 用作背景。我正在尝试根据视图中的页面部分更改颜色。

这是我的 fiddle。

我目前在向上滚动时无法正常工作。我尝试将 if 语句更改为 if height is > this div && < this div + the next 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 - 修复了每个部分的背景颜色变化

Jquery - fixed background color change in each section

scrolltop