运用scroll实现两个背景图随着鼠标的滚动出现交叉偏移

只为以后查找方便。

之前遇到过一个小效果，有两个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";
        })  
    })
})

这篇文章到这就结束啦，下一篇即将到来。