[英]How do I use CSS to alter the colour of my logo when I scroll onto a different background colour
I currently have a white SVG logo that I am using as my website is mostly dark backgrounds. 我目前使用白色SVG徽标,因为我的网站主要是深色背景。 However, I do have a section that is white so I am looking to change the colour of the logo to black while scrolling through the white section.
但是,我确实有一个白色区域,因此我希望在滚动白色区域时将徽标的颜色更改为黑色。
Here is a copy of the logo code and white section: 这是徽标代码和白色部分的副本:
<!-- Logo -->
<div class="logo" style="display: block;">
<a href="#home"></a>
</div>
<!-- About -->
<div class="scrollview about">
<div class="col-sm-3">
</div>
</div>
Here is my current styles: 这是我目前的风格:
.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;
}
I'm not sure if it can be done using only CSS, but if someone can even point me towards a plugin or script it would be much appreciated. 我不确定是否可以仅使用CSS来完成,但是如果有人甚至可以将我指向插件或脚本,将不胜感激。
Thanks 谢谢
You can't use CSS like that to change the style of an SVG that's in a separate file. 您不能使用这样的CSS来更改单独文件中SVG的样式。 CSS rules do not cross document boundaries.
CSS规则不会跨越文档边界。
To style the SVG, you would need to need to inline it in your HTML page. 要设置SVG的样式,您需要在HTML页面中内联它。
Assuming you made that change, then you could add a scroll event handler to the page and watch the position of the logo. 假设您进行了更改,则可以向页面添加滚动事件处理程序,并观察徽标的位置。 If you detect it is at the right point on the page (ie. it is over the white section), then you could add a class to it (or the
<a>
or the <div>
). 如果您发现它在页面上的正确位置(即,它位于白色部分上方),则可以向其添加一个类(或
<a>
或<div>
)。 The class would change the colour of the logo using fill: black
, or whatever. 该类将使用
fill: black
来更改徽标的颜色fill: black
或其他。
Have you considered an easier solution? 您是否考虑过更简单的解决方案? Such as giving the logo a dark outline, so that it stands out when over the white background?
例如给徽标添加深色轮廓,以便在白色背景上突出显示?
The fill
property in CSS
is for filling in the color of a SVGs
. CSS
的fill
属性用于填充SVGs
的颜色。
svg {
fill: currentColor;
}
But you can't change the color of your logo for specific section of your site. 但是您不能为网站的特定部分更改徽标的颜色。
i check your demo link and I found out that they are use jquery
to add and remove css class from there logo. 我检查了您的演示链接,发现它们是使用
jquery
从那里的徽标中添加和删除css类的。 So you need add jquery
2.3.+ get the value of the bottom of the #main
element by adding the offset
of that element plus its height, set it as a variable
因此,您需要添加
jquery
2.3。+,通过添加元素的offset
及其高度来获取#main
元素底部的值,并将其设置为variable
var mainbottom = $('#main').offset().top + $('#main').height();
Now on scroll add function
现在滚动添加
function
$(window).on('scroll',function()
and in it just add 并在其中添加
stop = Math.round($(window).scrollTop());
if (stop > mainbottom) {
$('.logo').addClass('logo-dark');
} else {
$('.logo').removeClass('logo-dark');
}
Here's demo on codepen I made for you hope this will help you. 这是我为您制作的Codepen演示,希望对您有所帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.