Javascript 滚动经过每个部分时更改SVG的颜色

我有一个SVG徽标，当它滚动经过一个部分时，我需要动态地改变它的颜色。每个部分的高度和宽度均为浏览器窗口的100%

根据背景颜色，它将是黑色或白色。一旦我明白了要点，我很乐意把它设置好

这是我正在进行的工作，我已经搜索了一些东西，但找不到确切的我需要的

我试过的代码-

var t = $(".dba").offset().top;

    $(document).scroll(function(){
        if($(this).scrollTop() >= t)
        {   
            $('svg.digi-logo polygon').css({"fill":"#000000"});
            $('svg.digi-logo path').css({"fill":"#000000"});
            $('svg.digi-logo rect').css({"fill":"#000000"});
        } else {
            $('svg.digi-logo polygon').css({"fill":"#ffffff"});
            $('svg.digi-logo path').css({"fill":"#ffffff"});
            $('svg.digi-logo rect').css({"fill":"#ffffff"});
        }
    });

---

然而，这只是一个部分

您可以轻松跟踪相对于html元素的滚动位置

例如：

$('#foo').waypoint(function(direction) {
  if (direction === 'down' && $('#bar').is(':visible')) {
    $('#bar').velocity({ 
      # velocity.js is simalar to $.animate()
      # but better optimized
      height: 'hide'
    }, 500);
  } else {
    $('#bar').velocity({
      height: $(window).height()
    }, 500);
  }
}, {
  offset: '70px'
});

如果你不需要方向，那就更容易了，查看上面的文档以获得更多提示

---

当视口的顶部/底部与

元素

属性中定义的DOM obj“碰撞”（虽然不是真正的碰撞，但您可以看到图片）时，waypoint.js会触发处理程序函数。您只需将逻辑放入handler方法或if/else主体中，就可以了。

我建议您使用更好的滚动滑块，如，并使用其jQuery回调，如

或者，如果您喜欢只处理CSS，可以使用添加到正文中的类fullPage.js来触发一个或另一个CSS规则

---

这方面的一个例子可以在中看到。

为什么不将滚动偏移量除以页面高度（并取整它）。这将为您提供一个与正在显示的页面相对应的索引值。然后，您可以查找相应的徽标颜色以在阵列中使用。

$('#fullpage').fullpage({
   afterLoad: function(anchorLink, index){
        //afterLoading section 3
        if(index == 3){
            $('svg.digi-logo polygon').css({"fill":"#ffffff"});
            $('svg.digi-logo path').css({"fill":"#ffffff"});
            $('svg.digi-logo rect').css({"fill":"#ffffff"});
        }
    }
});