I am trying to create a sticky nav bar which reacts during scrolling with the background. I experimented with mix-blend-mode: difference
and it is exactly was I was looking for. But since I am using position: sticky
or position: fixed
this is what happen:
Close before hitting the nav bar:
Unfortunately when it hits the nav bar the whole font is inverting its color. Here is an example how it should look like when it scrolls into each other:
The Hamburger and Logo are creating a nice invert effect:
In this example I used position: absolute
and it looks totally fine.
Here is what I have coded so far:
HTML & CSS
.nav-bar {
width: calc(100vw - 3rem);
margin: 0 auto;
padding-top: 40px;
position: sticky;
top: 0;
}
.nav-bar ul {
display: flex;
justify-content: space-between;
top: 200px;
}
.nav-bar ul li {
list-style: none;
}
.nav-bar ul li img {
width: 30px;
}
.nav-bar ul li .line {
width: 25px;
height: 5px;
background: #000;
margin-bottom: 3px;
}
.nav-bar ul li .line:last-child {
margin-bottom: 0;
}
.headline-container {
padding-top: 100px;
}
.headline-container .headline-item {
width: calc(100vw - 3rem);
margin: 0 auto;
display: flex;
justify-content: space-between;
}
.headline-container .headline-item span {
font-size: 7vw;
font-family: 'Montserrat', sans-serif;
font-style: italic;
font-weight: bold;
mix-blend-mode: difference;
color: white;
}
<div class="nav-bar">
<nav>
<ul>
<li class="test">
<img src="./img/logo_nav.svg" alt="logo" />
</li>
<li>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</li>
</ul>
</nav>
</div>
<div class="headline-container">
<div class="headline-item">
<span>W</span>
<span>E</span>
<span>B</span>
<span>A</span>
<span>P</span>
<span>P</span>
<span>L</span>
<span>I</span>
<span>C</span>
<span>A</span>
<span>T</span>
<span>I</span>
<span>O</span>
<span>N</span>
</div>
<div class="headline-item">
<span>D</span>
<span>E</span>
<span>S</span>
<span>I</span>
<span>G</span>
<span>N</span>
</div>
<div class="headline-item">
<span>B</span>
<span>R</span>
<span>A</span>
<span>N</span>
<span>D</span>
<span>I</span>
<span>N</span>
<span>G</span>
</div>
<div class="headline-item">
<span>C</span>
<span>O</span>
<span>M</span>
<span>M</span>
<span>U</span>
<span>N</span>
<span>I</span>
<span>C</span>
<span>A</span>
<span>T</span>
<span>I</span>
<span>O</span>
<span>N</span>
</div>
</div>
I have fixed that issue:
I dont know exactly what happened, but since I restructured everything, and used CSS instead of SCSS, i guess i had somewhere a typo, or something like that