运用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";
        })  
    })
})

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

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,276评论 1 92
  • 转载请声明 原文链接地址 关注公众号获取更多资讯 第一部分 HTML 第一章 职业规划和前景 职业方向规划定位...
    程序员poetry阅读 16,055评论 32 459
  • 打开终端(可以通过Spotlight搜索比较快捷) 1.移除现有Ruby默认源 gem sources –remo...
    pinksnow阅读 160评论 0 0
  • Socket error 0 - Directly send errorSocket error 10004 - ...
    Irlans阅读 2,150评论 0 0
  • 从《嫌疑人X的献身》到《白夜行》,从《梦幻花》到《新参者》……大卖的作品,已然将东野圭吾推上了日本推理界的领军人物...
    龙_隆阅读 309评论 1 0