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

Question

我有一个 SVG Logo ，当它滚动经过某个部分时我需要动态更改颜色。每个部分的高度和宽度都是浏览器窗口的 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

我建议您使用更好的滚动 slider ，例如 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 中看到。 .