javascript - 导航背景颜色在滚动时发生变化

Question

我希望我的部分导航背景在用户向下滚动时更改颜色以匹配内容颜色。

可在 blobfolio.com 找到一个确切的例子。 .

我的尝试:

window.onscroll = function () {
    var background = document.body.scrollTop < 200 ? '#fff' : 'red',
        elems = document.getElementsByTagName('nav');

    for (var i=0; i<elems.length; i++) {
        elems[i].style.background = background;
    }
} 

我认为它将包含 for 循环。我试过这个JSFiddle但是整个背景都变了，这不是我想要的。

我真的很困，任何帮助将不胜感激!

此外，我正在尝试使用纯 JavaScript 执行此操作 - 没有框架。

Answer 1

我认为这可以满足您的要求:

window.onscroll = function () {
    var i = 0;
    var elements = document.getElementsByClassName("container");
    for(var j=elements.length-1; j>0; j--)
    {
        if (parseInt(elements[j].getBoundingClientRect().top) <= 0)
        {
            i = j;
            break;
        }
    }

    var nav = document.getElementsByClassName("nav");
    for (var j=0; j<nav.length; j++)
        nav[j].style.backgroundColor = "";

    nav[i].style.backgroundColor = window.getComputedStyle(elements[i]).getPropertyValue("background-color");
}

window.onscroll();

这是关于 JSFiddle 的演示.

用纯 JavaScript 做这件事很有趣 :D