CSS ändern, wenn die ID erreicht ist

Question

Ich möchte die CSS-Klasse von class = "Name1" ändern, wenn ID "section-2" erreicht ist. Außerdem CSS von class = "Name2" ändern, wenn id "section-3" ist erreicht.

Dieser Code funktioniert nur für einen Abschnitt.

CSS

.Name1 { 
    -moz-transition: all 2s linear; 
    -webkit-transition: all 2s linear; 
    transition: all 2s linear; 
} 
.Name2 { 
    -moz-transition: all 2s linear; 
    -webkit-transition: all 2s linear; 
    transition: all 2s linear; 
} 
.rotate { 
    -moz-transform:rotate(360deg); 
    -webkit-transform:rotate(360deg); 
    transform:rotate(360deg); 
} 

JS

$(window).scroll(function (event) { 
    var scroll = $(window).scrollTop(); 
    $('.Name1').toggleClass('rotate', 
     scroll >= $('#section-2').offset().top 
    ); 
}); 
$(window).scroll(); 

HTML

<ol class="curtains"> 
    <li id="section-1" class="cover" "> 
    <section class="center-block"> 
     <div class="wrapper clearfix"> 
     <div class="col1-1 centered"> 

     </div> 
     </div> 
    </section> 
    </li> 
    <li id="section-2" class="cover" style="background-color:#e74c3c"> 
    <section class="center-block"> 
     <div class="wrapper clearfix"> 
     <div class="col1-2"> 
      <h4 class="Name1">Name1</h4> 
     </div> 
     </div> 
    </section> 
    </li> 
    <li id="section-3" class="cover" style="background-color:#16a085"> 
    <section class="center-block"> 
     <div class="wrapper clearfix"> 
     <div class="col1-2"> 
      <h4 class="Name2">Name 2</h4> 
      </div> 
     </div> 
    </section> 
    </li> 
</ol> 

und wenn ich will es beide 2 Abschnitte testen funktioniert nicht mit diesem Code.

$(window).scroll(function (event) { 
    var scroll = $(window).scrollTop(); 
    $('.Name1').toggleClass('rotate', 
     scroll >= $('#section-2').offset().top 
    ); 
    $('.Name2').toggleClass('rotate', 
     scroll >= $('#section-3').offset().top 
    ); 
}); 
$(window).scroll(); 

Answer 1

ich Ihren Code geändert, um den Dreheffekt zu haben, auftreten wenn Titel das Ansichtsfenster vom unteren Rand der Seite eingeben.

Dies ist, was ich von verstehe

I .addClass und .removeClass Bedingungen basierend auf dem Dokument «wenn beim Scrollen zu id =‚Name2‘Ankunft» minus die Höhe Ansichtsfenster zu scrollen.

Weil bei der Verwendung .toggleClass direkt in der Scroll-Ereignis ... Es schaltet die Klasse an/aus etwas wie 10 Mal auf einem ziemlich kleinen Mausrad Drehung ... Und die Animation zu seltsam oder gar nicht funktionieren .

Es verhindert auch, dass die Animation die ganze Zeit beim Lesen auftritt.

//$(document).on("scroll", function(){console.log("document scroll!");}); 
    var viewportHeight = $(window).width(); 

    console.log("viewportHeight: "+viewportHeight); 
    console.log("section-2 offset: "+$('#section-2').offset().top); 
    console.log("section-3 offset: "+$('#section-3').offset().top); 

    $(document).on("scroll",function(){ 
     var scrollVal = $(window).scrollTop(); 

     // Will rotate when window scroll offset is between section-2 and section-3 (both values minus viewport height) 
     if((scrollVal >= $('#section-2').offset().top-viewportHeight) && (scrollVal < $('#section-3').offset().top-viewportHeight)){ 
      $('.Name1').addClass('rotate'); 
      console.log("Section 2 entered viewport!"); 
     }else{ 
      $('.Name1').removeClass('rotate'); 
     } 

     // Will rotate when document scroll offset is greater than section-3 (value minus viewport height) 
     if(scrollVal >= $('#section-3').offset().top-viewportHeight){ 
      $('.Name2').addClass('rotate'); 
      console.log("Section 3 entered viewport!"); 
     }else{ 
      $('.Name2').removeClass('rotate'); 
     } 
    }); 

Ich habe auch eine minimale Änderung Ihre CSS:

.Name1 { 
    -moz-transition: all 2s linear; 
    -webkit-transition: all 2s linear; 
    transition: all 2s linear; 
    width:10%;       /* added */ 
} 
.Name2 { 
    -moz-transition: all 2s linear; 
    -webkit-transition: all 2s linear; 
    transition: all 2s linear; 
    width:10%;       /* added */ 
} 
.rotate { 
    transform-origin: center;   /* added */ 
    -ms-transform: rotate(360deg); 
    -webkit-transform: rotate(360deg); 
    transform: rotate(360deg); 
} 

es in Aktion in Fiddle

Answer 2

Sie this verwenden können, um das Element zu beziehen und anstelle der id Suche nach der Mutter , überprüfen Sie dies:

$(window).scroll(function(event) { 
 
    var scroll = $(window).scrollTop(); 
 
    $('h4').each(function(){ 
 
    $(this).toggleClass('rotate', 
 
     scroll >= $(this).parents('.cover').offset().top 
 
    ); 
 
    }) 
 
}); 
 
$(window).scroll();

* { 
 
    margin: 0; 
 
    padding: 0 
 
} 
 
li { 
 
    list-style: none; 
 
} 
 
.cover { 
 
    height: 500px; 
 
} 
 
h4 { 
 
    transform-origin: center; 
 
    display:inline-block; 
 
    font-size: 4em; 
 
} 
 
.Name1 { 
 
    -moz-transition: all 2s linear; 
 
    -webkit-transition: all 2s linear; 
 
    transition: all 2s linear; 
 
} 
 
.Name2 { 
 
    -moz-transition: all 2s linear; 
 
    -webkit-transition: all 2s linear; 
 
    transition: all 2s linear; 
 
} 
 
.rotate { 
 
    -moz-transform: rotate(360deg); 
 
    -webkit-transform: rotate(360deg); 
 
    transform: rotate(360deg); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ol class="curtains"> 
 
    <li id="section-1" class="cover"> 
 
    <section class="center-block "> 
 
     <div class="wrapper clearfix "> 
 
     <div class="col1-1 centered "> 
 
     </div> 
 
     </div> 
 
    </section> 
 
    </li> 
 
    <li id="section-2" class="cover" style="background-color:#e74c3c "> 
 
    <section class="center-block "> 
 
     <div class="wrapper clearfix "> 
 
     <div class="col1-2 "> 
 
      <h4 class="Name1 ">Name1</h4> 
 
     </div> 
 
     </div> 
 
    </section> 
 
    </li> 
 
    <li id="section-3 " class="cover" style="background-color:#16a085 "> 
 
    <section class="center-block "> 
 
     <div class="wrapper clearfix "> 
 
     <div class="col1-2 "> 
 
      <h4 class="Name2 ">Name 2</h4> 
 
     </div> 
 
     </div> 
 
    </section> 
 
    </li> 
 
</ol>