Question

我正在努力实现这个结果，你可以看到它在这里使用得非常出色 http://www.formuswithlove.se

当我到达名为#about的特定div时，我希望身体背景发生变化。

你能帮帮我吗？

非常感谢， F。

Answer 1

你可以根据没有任何jQuery插件的滚动偏移来做到这一点

$(window).scroll(function(){
    if($(window).scrollTop()>500){
        $('body').addClass('redBg')
    }else{
        $('body').removeClass('redBg')
    }
})

或使用类似jQuery.inview

的内容

$("#someElement").bind('inview', function(e, isInView) {
   if(isInView){
     $('body').addClass('redBg')
   }else{
      $('body').removeClass('redBg')
   }
});

Answer 2

这是一个帮助您入门的基本示例。它在Firefox，Chrome和IE 9＆amp; 10 - 虽然没有在Safari中测试过。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
body{
    margin:0;
    padding:0;
    background:white;
}
div{
    width:100%;
    height:1600px;
}
</style>
<script type="text/javascript">
var section = {
    sections: [
        'section1',
        'section2',
        'section3'
    ],

    sectionOffset: {},

    sectionBackground: {
        'section1': 'rgb(0, 0, 0)',
        'section2': 'rgb(132, 132, 132)',
        'section3': 'rgb(255, 255, 255)'
    },

    currentSection: null
}

window.onload = function()
{
    var looplen = section.sections.length;

    for(var i = 0; i < looplen; ++i)
    {
        section.sectionOffset[section.sections[i]] = document.getElementById(section.sections[i]).offsetTop;
    }

    setTimeout("initialBackgroundChange()", 50);
}

window.onscroll = function()
{
    tryBackgroundChange();
};

function tryBackgroundChange()
{
    var looplen = section.sections.length,
        match,
        backgroundColor;

    for(var i = 0; i < looplen; ++i)
    {
        if(pageYOffset >= section.sectionOffset[section.sections[i]])
        {
            match = section.sections[i];
        }
    }

    if(match != section.currentSection)
    {
        section.currentSection = match;
        changeBackground();
    }
}

function changeBackground()
{
    var cbc, // Current background-color
        tbc, // Target backgrounc-color
        ri,  // Red incrementation
        gi,  // Green incrementation
        bi,  // Blue incrementation
        rgb, // Temporary color from cbc to tbc
        smoothness = 20; // Higher is smoother

    cbc = getStyle(document.body, 'background-color');
    cbc = cbc.substr(4, cbc.length-5);
    cbc = cbc.split(", ");

    tbc = section.sectionBackground[section.currentSection];
    tbc = tbc.substr(4, tbc.length-5);
    tbc = tbc.split(", ");

    ri = (tbc[0] - cbc[0]) / smoothness;
    gi = (tbc[1] - cbc[1]) / smoothness;
    bi = (tbc[2] - cbc[2]) / smoothness;

    for(var i = 1; i <= smoothness; ++i)
    {
        rgb = [
            Math.ceil(parseInt(cbc[0]) + (ri * i)),
            Math.ceil(parseInt(cbc[1]) + (gi * i)),
            Math.ceil(parseInt(cbc[2]) + (bi * i))
        ];

        setTimeout("document.body.style.backgroundColor = 'rgb(" + rgb.join(",") + ")'", i * (240/smoothness));
    }
}

function initialBackgroundChange()
{
    if(pageYOffset == 0)
    tryBackgroundChange();
}

function getStyle(elem, name)
{
    if (document.defaultView && document.defaultView.getComputedStyle)
    {
        name = name.replace(/([A-Z])/g, "-$1");
        name = name.toLowerCase();
        s = document.defaultView.getComputedStyle(elem, "");
        return s && s.getPropertyValue(name);
    }

    else if (elem.currentStyle)
    {
        if (/backgroundcolor/i.test(name))
        {
            return (function (el)
            { // get a rgb based color on IE
                var oRG=document.body.createTextRange();

                oRG.moveToElementText(el);

                var iClr=oRG.queryCommandValue("BackColor");

                return "rgb("+(iClr & 0xFF)+","+((iClr & 0xFF00)>>8)+","+
                        ((iClr & 0xFF0000)>>16)+")";
            })(elem);
        }

        return elem.currentStyle[name];
    }

    else if (elem.style[name])
    {
        return elem.style[name];
    }

    else
    {
        return null;
    }
}

</script>
</head>

<body>

<div id="section1"></div>

<div id="section2"></div>

<div id="section3"></div>

</body>
</html>

滚动时更改正文的背景颜色

2 个答案: