当用户向下滚动时,我希望部分导航背景更改颜色以匹配内容颜色。
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中执行此操作 - 没有框架。
答案 0 :(得分: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
答案 1 :(得分: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","");
}
}
抱歉,如果您不想使用Jquery。在这里,我只想告诉你如何实现这一目标。
答案 2 :(得分:1)
试一试。 Working Demo
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;
}
}
}
让我知道它是否适合你。