滾動時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();
    }
})