Question

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

根据背景颜色，它可以是黑色或白色。一旦得到了这个要点，我很乐意设置这个。

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

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

Code I尝试过 -

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 or 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，可以使用类fullPage.js添加到正文以触发一个或另一个CSS规则。

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

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

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

当viewport的顶部/底部碰撞时，waypoint.js触发处理函数会发生什么？（好吧，并没有真正碰撞，但你得到的图片）在element属性中定义了DOM obj。您需要做的就是将您的逻辑放入处理程序方法或if / else主体中，然后您就可以了。

滚动浏览每个部分时更改SVG的颜色

2 个答案: