导航背景颜色在滚动时改变
Nav background color changes upon scroll
我希望我的导航背景的一部分改变颜色,以匹配内容的颜色,当用户向下滚动。
一个确切的例子可以在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中做到这一点-没有框架
我认为这是你想要的:
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
你可以试试这样
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 Fiddle Demo
对不起,如果你不想使用Jquery。在这里,我只是给你一个如何实现这一目标的想法。
试试吧。工作演示
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;
}
}
}
让我知道它是否适合你。
请在这里找到更新的演示链接
相关文章:
- 当偏移量改变时滚动顶部
- 改变滚动的顶部值
- 如何改变颜色时,用户滚动
- 滚动,在方向改变时翻转图像
- 滚动-是否可以使用精灵并改变滚动的位置
- 当滚动条到达页面顶部时,它会改变高度
- 如何改变URL(哈希),当用户滚动或点击链接与jquery历史插件
- AngularJS ui-router,滚动到状态改变的下一步
- 导航背景颜色在滚动时改变
- 改变滚动的背景色
- Angular:在改变视图时禁用滚动到顶部
- 改变引导导航条滚动效果
- 如何为改变滚动状态的菜单栏添加悬停效果
- Jquery改变滚动的不透明度和高度
- 如何改变滚动条的颜色
- 如何改变滚动条样式或隐藏滚动条在浏览器通过javascript或css
- 如何在运行时用javascript改变滚动条css
- 用多个菜单改变滚动上的活动菜单项
- 改变滚动的变量值- jQuery
- 如何在不改变滚动位置的情况下加载数据