CSS position: fixed + mix-blend-mode: difference issue
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
mix-blend-mode sticky position
for the mix-blend-mode to work apply it like this
body {
height: 150vh;
background: #000;
}
h1 {
color: rgb(255, 255, 255);
z-index: 2;
}
.top {
mix-blend-mode: difference;
position: sticky;
top: 0;
height: 50vh;
z-index: 1;
}
.bottom {
background: rgb(232, 12, 12);
position: sticky;
top: 0;
height: 50vh;
position: relative;
isolation: isolate;
}
<div>
<div class="top">
<h1>Hello World</h1>
</div>
<div class="bottom"></div>
</div>
Mix-blend-mode not affecting any component
did you want something like this?
html {
scroll-behavior: smooth;
background: #fff;
}
body {
margin: 0;
padding: 0;
width: 100%;
max-width: 100%;
background-color: #ffffff;
color: #0d0d0d;
}
/**********************************************/
.section {
width: 100vw;
max-width: 100%;
background-color: #ffffff;
text-align: center;
margin: 0;
padding: 15vh 0;
position: relative;
}
.blk {
background-color: #0d0d0d;
color: #ffffff;
}
/**********************************************/
.sidenav {
width: auto;
position: fixed;
z-index: 1;
top: 150px;
padding: 8px 0;
mix-blend-mode: difference;
}
.sidenav a {
clear: both;
float: left;
position: relative;
left: -20%;
padding: 10px;
margin-bottom: 15px;
transition: 0.3s;
text-decoration: none;
text-align: right;
font-size: 24px;
border-style: solid;
border-width: 2px;
border-color: #fff;
border-radius: 0 5px 5px 0;
color: #fff;
background-color: #000;
}
.sidenav a:hover {
left: -2px;
}
.sidenav a.selected {
left: -2px;
color: #000;
background-color: #fff;
cursor: default;
}
<!doctype html>
<html>
<head></head>
<body>
<div class="sidenav">
<a href="#" class="selected"> Section 1</a>
<a href="#"> Another Section</a>
<a href="#"> Last One</a>
</div>
<div class="content" onclick="closeMenu()">
<div class="section" id="works">
<p>Some text<p>
</div>
<div class="section blk" id="works">
<p>Some text<p>
</div>
<div class="section" id="works">
<p>Some text<p>
</div>
<div class="section blk" id="works">
<p>Some text<p>
</div>
<div class="section" id="works">
<p>Some text<p>
</div>
</div>
</body>
</html>
Related Topics
Div Elements to Follow a Curved Path with CSS3
How Do Browsers Parse/Render CSS
Animating Elements Sequentially in Pure CSS3 on Loop
React Native: "Auto" Width for Text Node
How to Display a Logo with CSS
CSS Selector for Custom Qt Class
How to Fix Collapsing Top and Bottom Margins
Adding Icons to Bootstrap Drop Down Menu Items
Using Just CSS, Crop .Img Keeping Aspect Without Distortion
How to Set a Floating Div's Width to Take Up Remaining Space Without Pushing Other Divs Down
How to Align The Radio Buttons Horizontally in Angular Material
Broke Page Styles of Vue.Js App (Webpack Template) When Live Changing It in Chrome Devtools
Bootstrap 3: How to Create Responsive, Square .Thumbnail Divs
How to Select a Radio Button in CSS