背景切换器，当 div 到达页面顶部时答案

【问题标题】：Background switcher, when a div hits top of the page背景切换器，当 div 到达页面顶部时
【发布时间】：2014-03-02 16:47:20
【问题描述】：

我已经尝试了一段时间来让它完全工作并完善代码，但我仍然是一个菜鸟 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/（抱歉页面加载缓慢，主机不好）

感谢您的宝贵时间

【问题讨论】：

标签： javascript jquery css background switch-statement

【解决方案1】：

jQuery 插件Waypoints 在这里可能会帮到你很多。您基本上可以设置自己的偏移量，然后在浏览器从顶部位于该位置时返回一些内容，例如：

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

所以，当 #div_top 从顶部偏移为 0 时，这将改变背景图像。

【讨论】：

谢谢，帮了大忙：D