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

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.

JS:

$(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);
});

CSS:

: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;
}

HTML:

<!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>

What I need is no matter where the scroll bar is, the color to be “blue” and ONLY when it is over an element with the CSS class “black” to turn to white. I hope I am explaining it well. Thank you!

Hi!
The link does not work, seems to be to a local file.
Maby you could add a picture of the problem? :slightly_smiling_face:

Hello there,

I cant add a picture because its a movement related issue. Can you copy the code and run it from your side?
Thank you!

Sorry, this was beyond my knowledge. Never worked with jQuery before.

I made the scoll become white when the % is over 50 and turn back to blue when % is under 50. I did this with a if() statement.

I did not figured out how to make the color depend on what elements the scroll runs over :woman_shrugging:

1 Like

No problem! Thank you!