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:  

[![Close before hitting the nav bar](https://i.stack.imgur.com/72XoY.png)](https://i.stack.imgur.com/72XoY.png)

Here it hits the nav bar:  

[![Here it hits the nav bar](https://i.stack.imgur.com/mQH0e.png)](https://i.stack.imgur.com/mQH0e.png)

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:  

[![The Hamburger and Logo are creating a nice invert effect](https://i.stack.imgur.com/fW5Qp.png)](https://i.stack.imgur.com/fW5Qp.png)

In this example I used `position: absolute` and it looks totally fine.

Here is what I have coded so far:

HTML & CSS

```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;
}
```

```html
<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>
```