首页 > 代码库 > 滚动时div的背景图片随之滚动
滚动时div的背景图片随之滚动
在浏览一些网站时发现有一种效果是当滚动时看到某一DIV的背景也会随之滚动，如下：
当滚动时内容位置保持不变，但是内容后面的背景却在随着滚动。随之我通过审查元素看到了其是通过background-position来实现的，实现原理为当目标DIV出现在屏幕上时，当往下滚动时background-position的Y越来越小，反之则越大。
准备好一张大图，先写出布局
<style>.wrap{width: 100%;height: 3000px;}.wrap_bg{background: url(images/scroll_bg.jpg) no-repeat;background-position: center -300px;width: 100%;height: 600px;overflow: hidden;}.content{width: 100%;height: 100px;text-align: center;color: #fff;font-size: 100px;margin-top: 100px;}</style><div class="wrap"> <div class="wrap_bg"> <div class="content"> 内容 </div> </div></div>
使用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<divTop+divHeight){//判断div是否出现在屏幕 if(winTop>=prevtop){//滚动条往下 $(‘.wrap_bg‘).finish().animate({ backgroundPositionY:‘-=10px‘ },100); }else{//滚动条往上 $(‘.wrap_bg‘).finish().animate({ backgroundPositionY:‘+=10px‘ },100); } prevtop = $(window).scrollTop(); }})
滚动时div的背景图片随之滚动
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。