87,910
社区成员
发帖
与我相关
我的任务
分享【求助】如何用JS判断页面滚动到特定的div，从而实现背景的更换
像这个网页http://mailchimp.com/2012/，当滚动条到下一篇文章的时候背景就更换了。
我自己的想法是——每个文章块给予一个id号，当这一文章块过了窗口上方的时候开始更换背景。
我不知道百度什么关键词比较能找到这方式，所以来这里请教各位大大。
我找到了一个貌似可以实现的代码：click me，以下是我改过后的代码，是没滚动400px就改变背景图。但是我想实现的不是滚动某个高度改变背景图，而是到某个div的时候执行代码。
我自己的想法是——每个文章块给予一个id号，当这一文章块过了窗口上方的时候开始更换背景。
我不知道百度什么关键词比较能找到这方式，所以来这里请教各位大大。
我找到了一个貌似可以实现的代码：click me，以下是我改过后的代码，是没滚动400px就改变背景图。但是我想实现的不是滚动某个高度改变背景图，而是到某个div的时候执行代码。
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
body{
background:#666;
background-attachment: fixed;
-webkit-transition: background 0.5s ease-out;
-moz-transition: background 0.5s ease-out;
-o-transition: background 0.5s ease-out;
}
.block{
width:30%;
/*position:absolute;*/
margin:10% auto;
position:fixed;
font-family:Verdana, Geneva, sans-serif;
text-align:center;
}
.block2{
width:70%;
/*position:relative;*/
margin-left:auto;
font-family:Arial, Helvetica, sans-serif;
font-size:50px;
}
#title{
color:#fff;
}
h2{
color:#fff;
}
p{
color:#FF9;
}
.block2>p{
margin-top:200px;
}
</style>
<script type="application/javascript">
window.onload=function(){
var changeBG=true,Top=0;
var title=document.getElementById("title");
var phrase=document.getElementById("phrase");
var changed_color="#222";
var lastTop=0;
//设置原始变量
setInterval(function(){
Top=document.body.scrollTop;
if(Top>400+lastTop||Top<lastTop-400){
if(changed_color=="#222"){
document.body.style.backgroundColor=changed_color;
title.innerHTML="World";
phrase.innerHTML="hey, I changed!";
changed_color="#666";
}else{
document.body.style.backgroundColor=changed_color;
title.innerHTML="Hello";
phrase.innerHTML="welcome to my homepage!";
changed_color="#222";
}
lastTop=Top;
}
},1000)
}
</script>
</head>
<body>
<div class="block">
<h1 id="title">Hello</h1>
<p id="phrase">welcome to my homepage!</p>
</div>
<div class="block2">
<div id="a">
<h2>1. Keep good friends around</h2>
<p>Keeping good company will keep you socially happy and healthy throughout your life. On the other hand, nothing will drag you down more than socializing with people who hold you back from your full potential. Ironically, surrounding yourself with people who are intent on moving forward in life will keep you energized and make you feel as if you’re always in your prime. It’s when you find yourself surrounded by toxic friends who live in the past that you realize you’re not getting any younger, and you’ll start to feel as if the best days of your life have passed you by.
</p>
</div>
<div id="b">
<h2>2. Continue learning</h2>
<p>Saying someone is “old-fashioned” is just a nice way of saying their behind the times. If you get into the mindset that you’re “too old” to learn something (like how to use Windows 10 or an iPhone), you’ll certainly feel that you’re past your prime. We live in a world in which education and knowledge is literally at our fingertips, and it’s never been easier to pick up a new skill or hobby. Make it a habit to learn something new every day, and you’ll continue feeling sharp and ready to take on the world. Soon enough, you’ll be showing your children tips and tricks on the iPhone 6!
</p>
</div>
<div id="c">
<h2>3. Enjoy the little things</h2>
<p>When we were kids, we jumped in puddles, rolled down hills, and ate snowflakes falling from the sky. I’m not saying you, as a grown adult, should do these things habitually (except eating snowflakes; you’re never too old for that). But you should never overlook the small things in life. Celebrate your good hair days. Feel victorious when you hit every green light on the way home from work. Actively look for things to enjoy in your life; no matter how much may be going wrong, there will always be something to smile about if you look hard enough.
</p>
</div>
</div>
</body>
</html>
...全文
请发表友善的回复…
发表回复
善男xn 2015-09-05
- 打赏
- 举报
<script type="application/javascript">
var scroll;
if(!scroll) scroll ={};
scroll.scrollTopArray;
//对象数组 background是要改变的背景色
scroll.setArray;
//获得对应id的offsetTop、background
scroll.getScrollTop = function(eleArray){
var scrollTopArray = [];
if(eleArray){
for(var i=0;i<eleArray.length;i++){
var thisIndex = eleArray[i].id;
if(document.getElementById(thisIndex) != null){
var thisScrollTop = document.getElementById(thisIndex).offsetTop; //获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
var thisBackground = document.getElementById(thisIndex).style.background;
var ele = {};
ele.top = thisScrollTop;
ele.originalBackground = thisBackground; //初始背景色 假定有些场景下div的背景不相同，当然，你这个demo都是相同的
scrollTopArray.push(ele);
}
}
return scrollTopArray;
}
};
window.onload = function(){
var setArray = [
{id:"a",background:"red"},
{id:"b",background:"green"},
{id:"c",background:"blue"}
];
var finalArray = scroll.getScrollTop(setArray); //获得offsetTop和背景色的对象数组
scroll.setArray = setArray; //赋值给scroll对象在其他地方可用
scroll.scrollTopArray = finalArray;
}
//浏览器滚动事件
window.onscroll = function(){
var top = document.body.scrollTop;
for(var i=0;i<scroll.scrollTopArray.length;i++){
var thisEle = scroll.scrollTopArray[i].top;
var thisBackground = scroll.scrollTopArray[i].originalBackground;
var thisNodeBg = document.getElementById(scroll.setArray[i].id).style.background;
var thisNodeSetBg = scroll.setArray[i].background;
if(top >= thisEle){
if(thisNodeBg != thisNodeSetBg){
document.getElementById(scroll.setArray[i].id).style.background = thisNodeSetBg;
}
}else{
if(thisNodeBg != thisBackground){
document.getElementById(scroll.setArray[i].id).style.background = thisBackground;
}
}
continue;
}
}
</script>
Carol-Li 2015-09-05
- 打赏
- 举报
好棒好棒！！谢谢你这么费心的回答。这个应该符合我的需求，分都给你了~
善男xn 2015-09-05
- 打赏
- 举报
谢谢，过奖了，一起探讨！
