后台切换器，当div到达页面顶部时

Question

I've been trying for a while to get this completely working now and perfecting the code, but I am still a rooky javascript programmer so I decided to ask for help.

What I want the script to do is, when a div hits to top(or bottom) of the page the body background changes.

My current script to make this happen is.

        function bg_switch() 
        {
            var window_top = $(window).scrollTop();  
            var div_top = $('#post12').offset().top;
            var div_top_1 = $('#post10').offset().top;
            var div_top_2 = $('#post8').offset().top;
            var div_top_3 = $('#post1').offset().top;
            if (window_top > (div_top) ) 
            {
                $("body").css({"backgroundImage":"url(<?php bloginfo( 'template_url' );?>/img/bg/bg-join-us.jpg)"});                    
            }  

            if (window_top > (div_top_1) ) 
            {
                $("body").css({"backgroundImage":"url(<?php bloginfo( 'template_url' );?>/img/bg/bg-about-us.jpg)"});                   
            }

            if (window_top > (div_top_2)) {
                $("body").css({"backgroundImage":"url(<?php bloginfo( 'template_url' );?>/img/bg/bg-contact.jpg)"});                    
            }

            if (window_top > (div_top_3)) {
                $("body").css({"backgroundImage":"url(<?php bloginfo( 'template_url' );?>/img/bg/bg-bf4-join-us.jpg)"});                    
            }       
        }

        $(function () {
            $(window).scroll(bg_switch);
            bg_switch();
        }); 

As you can see this isn't really good code, it also doesn't change the background back for the first post.

Here is a website where I am working on and trying to get this principle work, so you guys see for yourself. http://neutralgaming.nl/NeutralGaming/ (sorry for the slow loading page, bad host)

Thanks for your time

Answer 1

The jQuery plugin Waypoints might help you out a lot here. You can basically set your own offsets and then return something when the browser is at that position from the top, for example:

$('#div_top').waypoint(function() {
  $(this).css({
    'background' : 'url(../path/to/img.jpg) no-repeat;'
}, { offset: 0 });

So, this will change the background image of #div_top when its offset is 0 from the top.