jquery - 如何在移动窗口滚动条时更改背景图像

Question

我有两个容器 div，如下所示(背景和内容区域)。当您将鼠标悬停在内容区域上并滚动时，背景的位置固定，并且会随着悬停的不同时代而变化。

但我的问题是，我希望背景随着窗口滚动条的变化而变化(与将鼠标悬停在内容区域上时背景变化的方式相同)但不太确定如何去做？

<div class="background">            
    <div class="era t_1500 bg active"></div>            
    <div class="era t_1600 bg"></div>       
    <div class="era t_1700 bg"></div>
    <div class="era t_1800 bg"></div>
</div>

<div class="content-area">          
    <div id="t_1500">
        //some content
    </div>          
    <div id="t_1600">
        //some content
    </div>      
    <div id="t_1700">
       //some content
    </div>
    <div id="t_1800">
        //some content
    </div>
</div>

$('#t_1500, #t_1600, #t_1700, #t_1800').hover(   
    function(){ 
        var thatId = $(this).attr('id');
        var thisBg = '.' + thatId;
        if(!$(this).hasClass('active') {
            $('.background .era').hide();
            $(thisBg).show();               
        }
    }   
);

Answer 1

我推荐你使用query parallax，它很容易使用，它可以满足你的需要

http://stephband.info/jparallax/