How do I change the color of a div on scroll?

Question

I have a div. It has a fixed position When the user is at the top of the page, the div is red. But when the user starts scrolling and the viewport is no longer at the top of the page, it is supposed to turn blue. But I could not figure out how to do that.

Below is the code:

.div {
  position:fixed;
  top:10px;
  left:10px;
  height:100px;
  width:100px;
  background:red;
}

/* I know the below syntax doesn't exist. I just wanted to give an idea of what I wanted */
.div:scroll {
  background:blue;
}

<div class="div">
</div>
<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque rhoncus condimentum magna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Integer eget commodo urna, eu fermentum nisl. Nullam ac erat eu nibh pulvinar porttitor. In suscipit sit amet sem sed lobortis. Nam venenatis eros quis feugiat auctor. Praesent bibendum lacus ut velit ultricies dignissim. Sed molestie a erat mollis dictum. Quisque nec elit eget nulla aliquam lacinia id quis orci. Aliquam mattis rhoncus lorem ut cursus. Integer id elit luctus, ultricies elit viverra, interdum tortor. Quisque gravida urna vel felis porttitor, quis porta lectus tempus. Morbi auctor eros porttitor augue viverra pulvinar. Pellentesque rutrum dolor tellus, vitae sollicitudin nulla suscipit eget. Cras nunc ex, tempor eget eleifend non, consectetur id nunc. Maecenas risus magna, feugiat ut efficitur ac, vestibulum at ex.
</p>
<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque rhoncus condimentum magna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Integer eget commodo urna, eu fermentum nisl. Nullam ac erat eu nibh pulvinar porttitor. In suscipit sit amet sem sed lobortis. Nam venenatis eros quis feugiat auctor. Praesent bibendum lacus ut velit ultricies dignissim. Sed molestie a erat mollis dictum. Quisque nec elit eget nulla aliquam lacinia id quis orci. Aliquam mattis rhoncus lorem ut cursus. Integer id elit luctus, ultricies elit viverra, interdum tortor. Quisque gravida urna vel felis porttitor, quis porta lectus tempus. Morbi auctor eros porttitor augue viverra pulvinar. Pellentesque rutrum dolor tellus, vitae sollicitudin nulla suscipit eget. Cras nunc ex, tempor eget eleifend non, consectetur id nunc. Maecenas risus magna, feugiat ut efficitur ac, vestibulum at ex.
</p>

Is there any way to implement this idea without using JavaScript?

You need JavaScript to do that, you cannot use css to achieve this — Son of Man, Dec 23 '21 at 16:58
https://stackoverflow.com/questions/52637835/dynamically-change-background-color-on-scroll — HDM91, Dec 23 '21 at 17:00

score 0 · Answer 1 · answered Dec 23 '21 at 17:12

Add an onscroll JavaScript event handler to your window in your JavaScript code and then change the color of the div in the function assigned to the event as follows.

<!DOCTYPE html>

<html>

<head>
  <title>Hello!</title>
  <style>
  .div {
  position:fixed;
  top:10px;
  left:10px;
  height:100px;
  width:100px;
  background:red;
}

  </style>
</head>

<body>
<div class="div" id="mydiv"></div>
      <p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque rhoncus condimentum magna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Integer eget commodo urna, eu fermentum nisl. Nullam ac erat eu nibh pulvinar porttitor. In suscipit sit amet sem sed lobortis. Nam venenatis eros quis feugiat auctor. Praesent bibendum lacus ut velit ultricies dignissim. Sed molestie a erat mollis dictum. Quisque nec elit eget nulla aliquam lacinia id quis orci. Aliquam mattis rhoncus lorem ut cursus. Integer id elit luctus, ultricies elit viverra, interdum tortor. Quisque gravida urna vel felis porttitor, quis porta lectus tempus. Morbi auctor eros porttitor augue viverra pulvinar. Pellentesque rutrum dolor tellus, vitae sollicitudin nulla suscipit eget. Cras nunc ex, tempor eget eleifend non, consectetur id nunc. Maecenas risus magna, feugiat ut efficitur ac, vestibulum at ex.
</p>
<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque rhoncus condimentum magna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Integer eget commodo urna, eu fermentum nisl. Nullam ac erat eu nibh pulvinar porttitor. In suscipit sit amet sem sed lobortis. Nam venenatis eros quis feugiat auctor. Praesent bibendum lacus ut velit ultricies dignissim. Sed molestie a erat mollis dictum. Quisque nec elit eget nulla aliquam lacinia id quis orci. Aliquam mattis rhoncus lorem ut cursus. Integer id elit luctus, ultricies elit viverra, interdum tortor. Quisque gravida urna vel felis porttitor, quis porta lectus tempus. Morbi auctor eros porttitor augue viverra pulvinar. Pellentesque rutrum dolor tellus, vitae sollicitudin nulla suscipit eget. Cras nunc ex, tempor eget eleifend non, consectetur id nunc. Maecenas risus magna, feugiat ut efficitur ac, vestibulum at ex.
</p>
<script>
window.onscroll=myfunc;
function myfunc(){
document.getElementById("mydiv").style.backgroundColor="Blue";
}
</script>
</body>
</html>

How do I change the color of a div on scroll?

1 Answers1