Jquery 向下滚动时如何更改背景？Wordpress

我想复制这里使用的效果。我的意思是通过向下滚动页面来改变背景色。我知道如何在页面上使用静态ID和特定数量的元素，例如使用航路点，但您必须在JS->中定义ID。我希望将它与wordpress-->一起使用，这意味着动态。我假设每篇文章都有一些属性“databgcolor”，javascript将使用这些属性。但我不知道如何才能做到这一点。
谢谢你的帮助

---

这不是我的逻辑，这些是他们用来改变身体背景的脚本，这是从您提供的链接中获取的。这可能对你有帮助

function scrollHandler(e)
{
refreshFocus();
} 

function refreshFocus()
{
var closest_center_dist = 99999;
var $closest_block;

var max_visible_h;
var winner;

$("div.block").each(function(ind, ele)
{

    var $block = $(ele);
    var scrollTop = $(window).scrollTop();
    var ele_y = $block.offset().top - scrollTop;
    var ele_bottom_y = $block.height() + ele_y;
    var ele_h = $block.height();
    var ele_center_y = ele_y + ele_h/2;

    var win_h = $("#win_h_ref").height()//$(window).height();
    var win_center_y = win_h/2;

    var ele_top_cutoff = Math.abs(Math.min(ele_y, 0));// from 0 to ..
    var ele_bottom_cutoff = Math.abs(Math.max(ele_y + ele_h - win_h, 0));// from 0 to ..
    var visible_ele_h = ele_h - ele_top_cutoff - ele_bottom_cutoff;


    var top_center_distance = Math.abs(ele_y - win_center_y);
    var bottom_center_distance = Math.abs(ele_bottom_y - win_center_y);

    var shortest_center_distance = Math.min(top_center_distance, bottom_center_distance);
    if(shortest_center_distance < closest_center_dist)
    {
        closest_center_dist = shortest_center_distance;
        $closest_block = $block;            
    }
});

if($closest_block)
{
    if($closest_block.size() > 0)
    {
        if($closest_block.hasClass("focus") == false)
        {
            $("div.block.focus").removeClass("focus");
            $closest_block.addClass("focus");

            $('#menu li.current').removeClass('current');
            $("#menu li a").each(function()
            {
                if($(this).attr("href") == "#"+$closest_block.attr("id"))
                {
                    $(this).closest("li").addClass("current");
                }
            });

            var $bg = $($closest_block.data("background"));
            var bg_clr = $bg.css("backgroundColor");
            $("body").css({"backgroundColor":bg_clr});

        }           
    }
}

}

函数scrollHandler（e） { 刷新焦点（）； } 函数refreshFocus（） { var最近中心距离=99999； var$最近的块； var max_visible_h； var赢家； $（“div.block”）。每个（函数（ind，ele） { 变量$block=$（ele）； var scrollTop=$（窗口）.scrollTop（）； var ele_y=$block.offset（）.top-scrollTop； var ele_bottom_y=$block.height（）+ele_y； var ele_h=$block.height（）； 变量ele_center_y=ele_y+ele_h/2； var win_h=$（“#win_h_ref”）.height（）/$（window.height（）； var win_center_y=win_h/2； var ele_top_cutoff=Math.abs（Math.min（ele_y，0））；//从0到。。 var ele_bottom_cutoff=Math.abs（Math.max（ele_y+ele_h-win_h，0））；//从0到。。 var visible_ele_h=ele_h-ele_top_Cupton-ele_bottom_Cupton； var top\u center\u distance=Math.abs（ele\u y-win\u center\u y）； var bottom\u center\u distance=Math.abs（ele\u bottom\u y-win\u center\y）； var最短中心距离=数学最小值（顶部中心距离、底部中心距离）； if（最短中心距离<最近中心距离） { 最近的中心距离=最短的中心距离； $closest_block=$block； } }); 如果（$U块） { 如果（$clock.size（）>0） { if（$clock.hasClass（“focus”）==false） { $（“div.block.focus”）.removeClass（“focus”）； $clock.addClass（“焦点”）； $（'#menu li.current'）.removeClass（'current'）； $（“#菜单li a”）。每个（函数（） { if（$（this.attr（“href”）==“#”+$clock.attr（“id”）） { $（此）.最近的（“li”）.addClass（“当前”）； } }); var$bg=$（$closest_block.data（“背景”）； var bg_clr=$bg.css（“背景色”）； $（“body”）.css（{“backgroundColor”：bg_clr}）； } } } }