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

我建议您使用查询视差，它易于使用并且可以满足您的需求

http://stephband.info/jparallax/