更改颜色SVG徽标

Question

我需要你帮助我。我想改变当前蓝色的颜色标志。在滚动页面时它应该是白色的。徽标采用SVG格式。我该怎么做？

Answer 1

根据您的实现，您可以附加一个窗口侦听器，在滚动时更改徽标的CSS。超时过后（表示用户已停止滚动*），CSS将恢复为蓝色。这可能看起来像：

var isScrolling;
window.addEventListener('scroll', function ( event ) {
  // Set your CSS to white:
  document.getElementById('#mySVG').style.fill = 'white';

  // Reset the timer, to tell when user has stopped scrolling
  window.clearTimeout(isScrolling);
  isScrolling = setTimeout(function() {
    // Set your CSS to blue:
    document.getElementById('#mySVG').style.fill = 'blue';
  }, 66);
}, false);

这可能会将整个SVG填充为蓝色，但您可以更改选择器以修改正确的元素。

*感谢this post处理scrollend案例。