当我滚动到其他背景颜色时，如何使用CSS更改徽标的颜色

Question

我目前使用白色SVG徽标，因为我的网站主要是深色背景。 但是，我确实有一个白色区域，因此我希望在滚动白色区域时将徽标的颜色更改为黑色。

这是徽标代码和白色部分的副本：

<!-- Logo -->
<div class="logo" style="display: block;">
  <a href="#home"></a> 
</div>

<!-- About -->
<div class="scrollview about">
  <div class="col-sm-3">

  </div>
</div>

这是我目前的风格：

.logo {
   position: fixed;
   top: 0;
   left: 0;
   margin: 20px;
   padding: 2.8em 2.8em;
   z-index: 9;
}
.logo a {
   width: 95px;
   height: 16px;
   display: block !important;
   background-image: url('../img/logo-light.png') transparent 0 0 no-repeat;
   background-image: none,url('../img/logo-light.svg');
}
.about {
  padding: 12.25em 10.25em;
  margin: 0;
  overflow: hidden;
  background: #fff;
  width: 100%;
  height: auto;
  z-index: 3;
}

我不确定是否可以仅使用CSS来完成，但是如果有人甚至可以将我指向插件或脚本，将不胜感激。

谢谢

Answer 1

您不能使用这样的CSS来更改单独文件中SVG的样式。 CSS规则不会跨越文档边界。

要设置SVG的样式，您需要在HTML页面中内联它。

假设您进行了更改，则可以向页面添加滚动事件处理程序，并观察徽标的位置。 如果您发现它在页面上的正确位置（即，它位于白色部分上方），则可以向其添加一个类（或<a>或<div> ）。 该类将使用fill: black来更改徽标的颜色fill: black或其他。

您是否考虑过更简单的解决方案？ 例如给徽标添加深色轮廓，以便在白色背景上突出显示？

Answer 2

CSS的fill属性用于填充SVGs的颜色。

svg {
    fill: currentColor;
 }

但是您不能为网站的特定部分更改徽标的颜色。

Answer 3

我检查了您的演示链接，发现它们是使用jquery从那里的徽标中添加和删除css类的。 因此，您需要添加jquery 2.3。+，通过添加元素的offset及其高度来获取#main元素底部的值，并将其设置为variable

var mainbottom = $('#main').offset().top + $('#main').height();

现在滚动添加function

$(window).on('scroll',function()

并在其中添加

stop = Math.round($(window).scrollTop());
    if (stop > mainbottom) {
        $('.logo').addClass('logo-dark');
    } else {
        $('.logo').removeClass('logo-dark');
   } 

这是我为您制作的Codepen演示，希望对您有所帮助。