只為以后查找方便。

之前遇到過一個小效果，有兩個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";
        })  
    })
})

這篇文章到這就結束啦，下一篇即將到來。