2

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

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 中做到这一点 - 没有框架。

4

3 回答 3

2

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

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

于 2013-05-31T16:30:58.370 回答
1

你可以试试这样的

window.onscroll = function () {
    var top=0;
    var top=document.body.scrollTop;
 if(top < 200){
     $("a[href='#home']").parent().css("background-color","Green");
         $("a[href='#home']").parent().siblings().css("background-color","");
       }

       if((top >= 200) && (top < 800)){
         $("a[href='#Services']").parent().css("background-color","red");
         $("a[href='#Services']").parent().siblings().css("background-color","");
       }    
}

JS 小提琴演示

抱歉，如果您不想使用 Jquery。在这里，我只是给你一个如何实现这一目标的想法。

于 2013-05-31T16:26:35.437 回答
1

试试这个。工作演示

window.onscroll = function () {
    var offset = Math.max(document.documentElement.scrollTop, document.body.scrollTop),,
        lis = document.getElementsByTagName('li');

    var colorMap = [
        { value: 200, color : 'green'} ,
        { value: 800, color : 'red' },
        { value: 2800, color: 'purple'}
    ];

        var isColorSet = false;
         for (var i=0; i<colorMap.length; i++) {
             lis[i].style.background='black';
             if (!isColorSet && offset < colorMap[i].value) {
                 lis[i].style.background = colorMap[i].color;
                 isColorSet = true;
             }
        }
}

请让我知道这对你有没有用。

请在此处找到更新的演示链接

于 2013-05-31T16:55:30.270 回答