Highlighting Elements on Scroll (jquery)

Question

I have 3 divs on the page and I want them to change the color if they are scrolling. For example, all divs are blue, if they scroll to the first diva, change to green, change to green to the second diva, but the first will be blue again. I do not know how to go about it. I count on your help and tips. Maybe you've seen a similar example somewhere :)

you can take a look on this question [trigger-event-when-user-scroll-to-specific-element-with-jquery](https://stackoverflow.com/questions/21561480/trigger-event-when-user-scroll-to-specific-element-with-jquery) — Kholy, Oct 09 '18 at 20:58

score 0 · Answer 1 · answered Oct 10 '18 at 05:25

According to your div color change dynamicaly bellow is the code

<!DOCTYPE HTML>
<html>
<head>
    
    <style>
        .divblue {
            width: 100%;
            height: 400px;
            background-color: blue;
            color: white;
        }
        .divgreen {
            width: 100%;
            height: 400px;
            background-color: green;
            color: white;
        }
    </style>
 </head >

<body>
    

    <div id="maindiv" style="width:100%;height:300px;overflow-y:scroll;">
        <div id="fstdiv" class="divblue">
         Hi  test for first div
        </div>
        <div id="snddiv" class="divblue">
          Hello  test for second div
        </div>
        <div id="thrdiv" class="divblue">
          Sir  test for Third div
        </div>
    </div>
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
   <script>
      
       $(document).ready(function () {
           $('#maindiv').scroll(function () {
               
               var hT = $('#fstdiv').outerHeight();
               var hH = $('#snddiv').outerHeight();
               var tH = $('#thrdiv').outerHeight();
               
              var wS = $(this).scrollTop();
               
               $('#fstdiv').removeClass('divgreen').addClass('divblue');
               $('#snddiv').removeClass('divgreen').addClass('divblue');
               $('#thrdiv').removeClass('divgreen').addClass('divblue');
               if (wS < 100) {
                   
                   $('#fstdiv').removeClass('divblue').addClass('divgreen');
               }
               else if (wS > 400 && wS < 700) {


                   $('#snddiv').removeClass('divblue').addClass('divgreen');
               }
               else {
                   $('#thrdiv').removeClass('divblue').addClass('divgreen');

               }
               
           });
       });
   </script>
</body>
 </html >

Highlighting Elements on Scroll (jquery)

1 Answers1