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

时间:2015-02-23 17:04:03

标签: javascript jquery html css svg

我有一个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"});
        }
    });

然而,这仅适用于一个部分。

2 个答案:

答案 0 :(得分: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中看到这方面的一个例子。

答案 1 :(得分:0)

您可以使用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主体中,然后您就可以了。