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

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 >
</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?

CodePudding user response：

Here you go...

As others have said, you have to use JavaScript or jQuery. I used jQuery.

See the snippet below.

$(window).scroll(function() {

  var scroll = $(window).scrollTop();

  if (scroll > 0) {
    $('.div').css('background-color', 'blue');
  } else {
    $('.div').css('background-color', 'red');
  }

});

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

<!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'>
  <title>Document</title>
  <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>

</head>

<body>

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

</body>

</html>

CodePudding user response：

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