How can I change the scrollbar color responsively?

  css, html, javascript, jquery, scrollbar

I have a website where it changes the scrollbar color after a certain amount of pixels are scrolled. The problem is if I change the view to mobile or enlarge my display to 150% it does not change the color where it should. I need to find out how to change the scrollbar color once it has scrolled a certain part down the page responsively.

.jumbotron {
    background-image: linear-gradient(135deg, #e4e158 0%, #e42222 100%) !important;
    z-index: 100;
    color: black !important;
}

.img {
border-style: solid;
border-width: 10px;
border-color: black;
width: 50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="jumbotron text-center">
<h1>Something to scroll</h1>
<h1>Something to scroll</h1>
<h1>Something to scroll</h1>
<h1>Something to scroll</h1>
<h1>Something to scroll</h1>
<h1>Something to scroll</h1>
<h1>Something to scroll</h1>
<h1>Something to scroll</h1>
<h1>As you can see I have two sections, I want to make the scrollbar color change once the scrollbar position just hits the second section.</h1>
<h1>Like this image below:</h1>

<img class="img" src="https://media.discordapp.net/attachments/794814958151139349/843630240978436096/unknown.png">


</div>
<div class="container-fluid text-center">
<h1>Something to scroll</h1>
<h1>Something to scroll</h1>
<h1>Something to scroll</h1>
<h1>Something to scroll</h1>
<h1>Something to scroll</h1>
<h1>Something to scroll</h1>
<h1>Something to scroll</h1>
</div>

Source: Ask Javascript Questions

LEAVE A COMMENT