how to change background image as window scroll bar is moved
===

I have two container divs as shown below (background and content area). The background has a fixed position and changes on different era on hover as you hover on the content area and scroll.

My problem however, is i would like the background to change with the window scroll bar (same way it changes when you hover over the content area) but not quite sure how to go about that?

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

