How to add CSS properties when the web page scrolls down?-CodePudding

I am a beginner in programming and I have encountered difficulties~

I have a web page element, and I hope to add a green block when the page scrolls down

.content{
  background-color: #ccc;
}

.wrap{
  max-width:600px;
  margin:auto;
}

.demo{
  background-color: #71ff05;
  height: 100px;
  text-align:center;
  line-height: 100px;
  font-size: 20px;
/*   position:fixed;
  top:0px;
  right:0px;
  left:0px; */
}
p{
  background-color: yellow;
  line-height:2;
  padding:20px;
}

<div class="content">
  <div class="wrap">
       <div class="demo">title</div>
        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Magnam laudantium, vel doloremque eveniet quam repudiandae porro dolor voluptas labore inventore voluptate mollitia ipsam ab tempore delectus libero. At autem distinctio amet enim obcaecati iusto consectetur minima dolore in similique suscipit, saepe fugiat nulla error aperiam, eos earum. Hic, sapiente assumenda officiis rem, aliquam non deleniti nemo nesciunt, accusantium nisi quam adipisci blanditiis eaque. Earum dolorum veniam dicta sunt hic quisquam ex esse, ratione architecto? Quae nemo modi nostrum asperiores, quibusdam quidem suscipit, sapiente architecto doloremque, iure magnam expedita nesciunt. Beatae optio illum eaque! Quibusdam magnam, quaerat quos at recusandae commodi ullam tenetur dolore nam, porro ex repellat aut autem architecto iste veritatis dolor nostrum exercitationem quia inventore perferendis necessitatibus facilis. Consequuntur atque facilis repudiandae optio consequatur fuga culpa est pariatur earum nisi. Unde blanditiis exercitationem fuga praesentium corrupti. Voluptatibus, earum sed doloremque illum nam, perferendis nihil a laudantium labore atque beatae hic quod aspernatur quasi, iste exercitationem. Excepturi molestias dolore dolorem sapiente officiis dolorum animi nihil inventore maxime eaque. Repudiandae cumque ducimus, suscipit eligendi quisquam ipsum. In excepturi eligendi recusandae commodi? Ducimus voluptas, nesciunt reiciendis eum quasi, molestias eius deleniti facere neque amet enim, porro autem illum! Exercitationem dolore qui cum aliquid fugiat. Aut alias fugiat fugit provident quas similique eaque officia sed quam, praesentium ut minus atque, velit dolor quidem facilis quo dolorem veniam repellendus magnam culpa adipisci obcaecati quasi excepturi. Temporibus, harum quam. Ducimus tenetur sequi, iusto quas officia recusandae? Hic ipsa temporibus aliquid ratione ullam delectus adipisci a sequi inventore laboriosam architecto alias quam voluptate mollitia facilis possimus, ducimus illo repellat magni reiciendis eius. Facilis tenetur distinctio quaerat dolore recusandae doloribus voluptate dolores sint cupiditate amet praesentium consequatur voluptatum quas, repudiandae facere? Enim fugiat quia inventore labore. Labore non aliquam necessitatibus laborum? Iusto reiciendis perferendis sunt distinctio!</p>
  </div>
</div>

When the page scrolls to the top, you can cancel this CSS setting, but because I am not familiar with javascript, I don’t know how to implement it.

I don’t know if anyone can provide me with a little help, thank you.

CodePudding user response：

Using JavaScript is not a must in this case, some css can work too

                            .wrap{
                                  scroll-snap-type:y mandatory;
                                   overflow-y:scroll;
                                   height: 100vh
                                }

                                p{
                                 height: 100vh;
                                 scroll-snap-align:start;
                                 }

and in your html break the whole lorem ipsum text into three or more <p> tags and give each <p> a different id name for example

          <p id="one">~</p>
          <p id="two">~</p>
          <p id="three">~</p>

and in your css file:

              .one{
                   background:#ccc;
               }

          .two{
               background:#fff;
           }

           .three{
               background:#AAA;
           }