只为以后查找方便。
之前遇到过一个小效果，有两个div，需要随着鼠标的滚动，下面的div滚动的比上面慢，但当两个div的底部重合时，两个div就不出现交叉。
图1.png
图2.png
1.css部分
<style>
*{margin:0;padding:0;}
.header{height:1000px;background:#fff;}
.footer{height:800px;background:#fff;}
#mpage{
height: 620px;
width:100%;
background-color:#fff;
background-image:url('./images/t2.jpg');
background-size:cover;
background-repeat:no-repeat;
background-attachment: fixed;
background-position-x:center;
background-position-y:center;
}
.slide_box{
height: 400px;
width:1200px;
background-color:pink;
position: absolute;
bottom:0;
left: 50%;
margin-left: -600px;
overflow: hidden;
}
.wrapper{height:620px;position:relative;box-sizing:border;}
</style>
2.文档部分
<div class="header"></div>
<div id="mpage">
<div class="wrapper">
<div class="slide_box"></div>
</div>
</div>
<div class="footer"></div>
3.js部分
$(function(){
$(window).scroll(function(){
var pageTop = $("#mpage").offset().top;
var st = $(window).scrollTop();
$("#mpage").css("background-position-y",function(){
return (pageTop - st)/2 + "px";
})
})
})
这篇文章到这就结束啦，下一篇即将到来。
