滚动时div的背景图片随之滚动-白红宇

滚动时div的背景图片随之滚动

阅读量：7072 次

发布时间：2019-06-28

本文共 945 字，大约阅读时间需要 3 分钟。

在浏览一些网站时发现有一种效果是当滚动时看到某一DIV的背景也会随之滚动，如下：

当滚动时内容位置保持不变，但是内容后面的背景却在随着滚动。随之我通过审查元素看到了其是通过background-position来实现的，实现原理为当目标DIV出现在屏幕上时，当往下滚动时background-position的Y越来越小，反之则越大。

准备好一张大图，先写出布局

使用scroll()方法实现最终效果

var winHeight = $(window).height();//窗口高var divHeight = $('.wrap_bg').height();//div高var divTop = $('.wrap_bg').offset().top;//div距离html顶部高度var prevtop = divTop;$(window).on('scroll',function(){    var winTop = $(window).scrollTop();//滚动条滚动高度    if(winTop+winHeight>divTop && winTop
     
      =prevtop){//滚动条往下            $('.wrap_bg').finish().animate({                backgroundPositionY:'-=10px'            },100);        }else{//滚动条往上            $('.wrap_bg').finish().animate({                backgroundPositionY:'+=10px'            },100);        }        prevtop = $(window).scrollTop();    }})

转载于:https://www.cnblogs.com/gxsyj/p/5957227.html

你可能感兴趣的文章