How to change the CSS attributes of 'color' and 'background' to 'white' when my scrollbar passes through an element with a class of 'black'

user_17843452 0
Viewed 80

I have a small issue related to CSS and JS. Here you can see the page with the issue:

http://127.0.0.1:5500/scroll-progress-bar/dist/index.html

On the right side, you can see there is a scroll bar with a percentage that has the color: blue. What I want is when this scroll bar is passing through the black section to change its color to 'white'. I have assigned a CSS class "black" to this section.

Here is my CSS, JS, and HTML Code.

$(document).scroll(function (e) {
  var scrollAmount = $(window).scrollTop();
  var documentHeight = $(document).height();
  var windowHeight = $(window).height();
  var scrollPercent = (scrollAmount / (documentHeight - windowHeight)) * 100;
  var roundScroll = Math.round(scrollPercent);
  
  // For scrollbar 1
  $(".scrollBar1").css("width", scrollPercent + "%");
  $(".scrollBar1 span").text(roundScroll);
  
  // For scrollbar 2
  $(".scrollBar2").css("height", scrollPercent + "%");
  $(".scrollBar2 span").text(roundScroll);
});
:root {
  --timing: ease;
}

.scrollBar2 {
  position: fixed;
  top: 0;
  right: 2vw;
  height: 0%;
  width: 10px;
  background: #49e;
  transition: height 200ms var(--timing);
  text-align: right;
  color: #49e;
  display: flex;
  align-items: center;
  border-radius: 1em;
}
.scrollBar2 span {
  position: absolute;
  bottom: 3px;
  left: 2px;
  font-size: 0.7em;
  font-weight: 500;
  display: inline-block;
  text-align: left;
  transform: rotate(-90deg);
  transform-origin: bottom left;
}
.scrollBar2 span::after {
  content: "%";
  font-size: 0.8em;
  position: absolute;
  right: -15px;
  bottom: 4px;
  font-weight: 700;
  opacity: 0.4;
}

.black {
  color: black;
  background: black;
  width: 100%;
  height: 100vh;
}

.red {
  color: red;
  background: red;
  width: 100%;
  height: 100vh;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>CodePen - Scroll Progress Bar</title>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"
    />
    <link rel="stylesheet" href="./style.css" />
  </head>
  <body>
    <!-- partial:index.partial.html -->

    <div class="scrollBar2"><span></span></div>
    <div class="red">panel1</div>
    <div class="black">panel1</div>

    <!-- Presentation stuff -->

    <!-- partial -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="./script.js"></script>
  </body>
</html>

Basically, I want when the scrollBar2 is passing through the div with class "black", the scrollBar2 to have a white color along with the percentage and the number:

I hope someone can help me! Thank you!

css html javascript
1 Answers

You could try mix-blend-mode.

It would need some thought to get the color you currently have on the initial phases of the vertical bar though.

This snippet just makes the bar and text white, then specifies mix-bend-mode difference as it flows over the red portion.

$(document).scroll(function(e) {
  var scrollAmount = $(window).scrollTop();
  var documentHeight = $(document).height();
  var windowHeight = $(window).height();
  var scrollPercent = (scrollAmount / (documentHeight - windowHeight)) * 100;
  var roundScroll = Math.round(scrollPercent);

  // For scrollbar 1
  $(".scrollBar1").css("width", scrollPercent + "%");
  $(".scrollBar1 span").text(roundScroll);

  // For scrollbar 2
  $(".scrollBar2").css("height", scrollPercent + "%");
  $(".scrollBar2 span").text(roundScroll);
});
:root {
  --timing: ease;
}

.scrollBar2 {
  position: fixed;
  top: 0;
  right: 2vw;
  height: 0%;
  width: 10px;
  background: #49e;
  transition: height 200ms var(--timing);
  text-align: right;
  color: #49e;
  display: flex;
  align-items: center;
  border-radius: 1em;
  color: white;
  background: white;
}

.scrollBar2 span {
  position: absolute;
  bottom: 3px;
  left: 2px;
  font-size: 0.7em;
  font-weight: 500;
  display: inline-block;
  text-align: left;
  transform: rotate(-90deg);
  transform-origin: bottom left;
}

.scrollBar2 span::after {
  content: "%";
  font-size: 0.8em;
  position: absolute;
  right: -15px;
  bottom: 4px;
  font-weight: 700;
  opacity: 0.4;
}

.black {
  color: black;
  background: black;
  width: 100%;
  height: 100vh;
}

.red {
  color: red;
  background: red;
  width: 100%;
  height: 100vh;
  mix-blend-mode: difference;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>CodePen - Scroll Progress Bar</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css" />
  <link rel="stylesheet" href="./style.css" />
</head>

<body>
  <!-- partial:index.partial.html -->

  <div class="scrollBar2"><span></span></div>
  <div class="red">panel1</div>
  <div class="black">panel1</div>

  <!-- Presentation stuff -->

  <!-- partial -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="./script.js"></script>
</body>

</html>

user_108674540
Related