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

Question

我有一个SVG徽标，当它滚动到某个区域时，需要动态更改颜色。 每个部分的高度和宽度均为浏览器窗口的100％。

根据背景颜色，它可以是黑色或白色。 一旦掌握了要点，我很乐意对此进行设置。

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

http://digitronix-dev.co.uk/dev/digitronix-holding/

我尝试过的代码-

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

但是，这仅适用于一部分。

Answer 1

我建议您使用更好的滚动滑块（例如fullpage.js）并使用其jQuery回调（例如afterLoad或onLeave 。

$('#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"});
        }
    }
});

另外，如果您只想处理CSS，则可以使用添加到正文中的class fullPage.js触发一个或另一个CSS规则。

在此视频教程中可以看到一个示例。

Answer 2

您可以使用waypoints.js轻松跟踪相对于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'
});

如果您不需要指导，甚至更容易，请查看上面的文档以获取更多提示。

发生的情况是，当视口的顶部/底部与element属性中定义的DOM obj碰撞时，Waypoint.js触发了处理程序函数（嗯，不是真的碰撞，但是您得到了图片）。 您需要做的就是将逻辑放入处理程序方法或if / else主体中，一切都很好。