javascript - 背景切换器，当 div 到达页面顶部时

Question

我已经尝试了一段时间来让它完全正常工作并完善代码，但我仍然是一个新手 javascript 程序员，所以我决定寻求帮助。

我想让脚本做的是，当 div 到达页面顶部(或底部)时，正文背景会发生变化。

我目前实现这一目标的脚本是。

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

如您所见，这并不是很好的代码，它也没有将第一篇文章的背景改回原来的样子。

这是一个网站，我正在这个网站上工作，并试图让这个原则发挥作用，所以你们自己看看。 http://neutralgaming.nl/NeutralGaming/ (抱歉页面加载缓慢，主机不好)

谢谢你的时间

Answer 1

jQuery 插件 Waypoints可能会在这里帮助你很多。您基本上可以设置自己的偏移量，然后当浏览器位于顶部的那个位置时返回一些东西，例如:

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

因此，当#div_top 距顶部的偏移量为 0 时，这将更改#div_top 的背景图像。