只為以后查找方便综看。
之前遇到過一個(gè)小效果，有兩個(gè)div岖食，需要隨著鼠標(biāo)的滾動(dòng)红碑，下面的div滾動(dòng)的比上面慢，但當(dāng)兩個(gè)div的底部重合時(shí)县耽，兩個(gè)div就不出現(xiàn)交叉句喷。
圖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";
})
})
})
這篇文章到這就結(jié)束啦殉疼，下一篇即將到來秸弛。
