如何在向下滾動時更改背景？ Wordpress

Question

我想重現這裏使用的效果http://www.ixistore.be/。我的意思是通過向下滾動頁面來改變背景顏色。我知道如何在頁面上使用靜態ID和特定數量的元素（例如航點）來做到這一點，但你必須在JS - >中定義ID。我很樂意在wordpress中使用它 - >這意味着動態的。我假設每個帖子都會有一些屬性「data-bgcolor」，並且會被javascript使用。但我不知道如何去實現這一點。
感謝您的幫助。

How to change the background-color when scrolling down

Answer 1

這不是我的邏輯，這些都是他們用改變身體的背景腳本，這是從您提供的鏈接取。這可能會幫助你。

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

     }   
    } 
} 

}