How to make a block with position:fixed to change the color when passing a certain border?

user_16427236 0
Viewed 100

Let's imagine that there is a site with alternating blocks, some blocks are blue, and others are red, and there is also a block with position:fixed that has blue color. When scrolling the page on a blue background, it should be red, and on red background it should be blue

enter image description here

This is the example of the code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css.css">
    <title>Document</title>
</head>
<body>
    <div class="fixed"></div>
    <div class="block red"></div>
    <div class="block blue"></div>
    <div class="block red"></div>
    <div class="block blue"></div>
</body>
</html>

    .block {
        width: 100%;
        height: 200px;
    }

    .red {
        background: red;
    }

    .blue {
        background: blue;
    }

    .fixed {
        position: fixed;
        background: blue;
        top: 100px;
        left: 100px;
        z-index: 10;
        width: 80px;
        height: 80px;
    }
css html javascript
2 Answers

You can use mix-blend-mode: difference and set the background color to full red and blue values:

Difference works by taking the absolute values of the difference in red, green, and blue values:

rgb(1, 0, 0) red +
rgb(1, 0, 1) pink (full r and b)
=
rgb(0, 0, 1) blue


.block {
  width: 100%;
  height: 200px;
}

.red {
  background: red;
}

.blue {
  background: blue;
}

.fixed {
  position: fixed;
  background: #ff00ff;
  mix-blend-mode: difference;
  top: 100px;
  left: 100px;
  z-index: 10;
  width: 80px;
  height: 80px;
}
<div class="fixed"></div>
<div class="block red"></div>
<div class="block blue"></div>
<div class="block red"></div>
<div class="block blue"></div>

user_2448110

You can try this solution, here you just change variables..

:root {
  --t:50px;
  --l:70px;
  --h:200px;
  --w:200px;
  --colorFirst:blue;
  --colorSecond:white;
}
.block {
  position: fixed;
  z-index:999;
  top: var(--t);
  left: var(--l);
  height: var(--h);
  width: var(--w);
  border:1px solid;
  box-sizing:border-box;
}
.is-first {
  display: block;
  height: 300px;
  width: 100%;
  position:relative;
  z-index:0;
  background:var(--colorSecond);
}
.is-first::before {
  content:"";
  position:absolute;
  z-index:99;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:
    linear-gradient(var(--colorFirst),var(--colorFirst)) var(--l) var(--t)/var(--w) var(--h) fixed no-repeat;
}
.is-second {
  display: block;
  position:relative;
  height: 300px;
  width: 100%;
  background: var(--colorFirst);
  color:#000;
}
.is-second::before {
  content:"";
  position:absolute;
  z-index:99;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:
    linear-gradient(var(--colorSecond),var(--colorSecond)) var(--l) var(--t)/var(--w) var(--h) fixed no-repeat;
}
body {
 padding-bottom:200px;
}
  <div class="block">
lorem pisum
</div>
<div class="is-first">
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries,
</div>
<div class="is-second">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries,
</div>
<div class="is-first">
 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries,
</div>

user_70519990
Related