CSS 位置：固定 + 混合模式：差异问题

Question

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:

Here it hits 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>

Answer 1

For me, this looks like the chromium problem. I use Google Chrome and setting the background color was the solution for me.

Here the bug .

 body { background-color: white; } .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 img .line { width: 25px; height: 5px; background: #000; margin-bottom: 3px; } .nav-bar ul li img .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="https://i.stack.imgur.com/72XoY.png" width="30px" height="30px" /> </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>

Answer 2

I have fixed that issue:

<div class="fixed_menu">
    <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>

  <div class="section section1">
    <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>
  </div>
</div>

* {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}

.section {
 background-color: white;
}

.section1 h1 {
 padding-top: 150px;
 text-align: center;
}

.fixed_menu {
 position: fixed;
 width: calc(100vw - 3rem);
 mix-blend-mode: difference;
 z-index: 2;
 left: 50%;
 top: 30px;
 transform: translateX(-50%);
}

.nav-bar {
 width: calc(100vw - 3rem);
 /* margin: 0 auto; */
}

.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: #fff;
 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;
}

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