[자바 스크립트] 스크롤이 2div 사이에있을 때마다 CSS 변경

코드를 구현하는 방법을 보여주는 실제 데모를 추가하고 코드를 다음과 같이 변경합니다.

var scrollFilter1 = $('#trigger-start').offset().top;
    var scrollFilter2 = $('#trigger-end').offset().top;
    
    var $w = $(window).scroll(function(){
        if ( $w.scrollTop() > scrollFilter1 && $w.scrollTop() < scrollFilter2 ) {  
                $('.products').addClass('bluebg');
                    } else {
                          $('.products').removeClass('bluebg');
                              }
                              });

.products{
      background:red;
        position:fixed;
          width:200px;
            height:200px;
            }
            .bluebg{
             background:blue;
             }
             #sth-top{
               height:200px;
                 width:400px;
                     background:black;
                     
                     
                     }
                     #trigger-start{
                         height:300px;
                           width:400px;
                                background:purple;
                                   
                                   }
                                   #sth-middle{
                                     height:200px;
                                       width:400px;
                                            background:black;
                                            }
                                            
                                            #trigger-end{
                                                height:300px;
                                                  width:400px;
                                                       background:purple;
                                                       }
                                                       #sth-bottom{
                                                         height:200px;
                                                           width:400px;
                                                               background:black;
                                                               
                                                               
                                                               }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div class="products"></div>
    <div id="sth-top"></div>
    <div id="trigger-start"></div>
    <div id="sth-middle"></div>
    <div id="trigger-end"></div>
    <div id="sth-bottom"></div>

스 니펫 확장

그것이 당신에게 효과가 있기를 바랍니다. 사용자 정의 CSS 및 클래스 또는 원하는 것을 추가해야합니다.

출처
https://stackoverflow.com/questions/39917212