问题描述
我正在尝试创建一个粘性导航栏,该导航栏在滚动背景时会做出反应。我尝试了mix-blend-mode: difference
,而这正是我想要的。但是由于我正在使用position: sticky
或position: fixed
,所以会发生这种情况:
在点击导航栏之前关闭:
在这里它击中了导航栏:
不幸的是,当它碰到导航栏时,整个字体都在反转其颜色。这是一个示例,当它们彼此滚动时应该是什么样子:
在此示例中,我使用了position: absolute
,它看起来还不错。
这是到目前为止我编写的代码:
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>
解决方法
对我来说,这看起来像是铬的问题。我使用Google Chrome浏览器,设置背景颜色是我的解决方案。
这里是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>
,
我已解决该问题:
<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;
}
我不知道到底发生了什么,但是由于我重组了所有内容,并使用CSS而不是SCSS,所以我猜我有一个错字之类的东西