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

因此，当从顶部偏移0时，这将改变#div_top的背景图像。

背景切换器，当div击中页面顶部时

1 个答案: