JQuery (Dokument) .ready noch ausgeführt, bevor das Dokument bereit ist?

Question

Während ich einige Web-Entwicklung machte, fand ich etwas sehr merkwürdig.

So unten ist mein JQuery Code

$(document).ready(function() { 
    $(window).scroll(function() { // check if scroll event happened 
     if ($(window).scrollTop() > $("#first-content").offset().top * 0.75) { 
      $(".links").removeClass("white").addClass("black"); 
      to white (#f8f8f8) 
     } else { 
      $(".links").removeClass("black").addClass("white"); 
     } 
    }); 
}); 

So ist es einfach etwas Abstand von der Spitze bekommt Klassen hinzuzufügen und entfernen auszulösen. Es muss nur einen Punkt geben, der ausgelöst wird, es sei denn, die Struktur der Website ändert sich dynamisch, was meiner Meinung nach in meinem Code nicht möglich ist.

Also das Problem ist, dass es am Ende gut funktioniert. Wenn die 0,75 * -Position vom oberen Rand des Fensters zum oberen Rand des Elements übergeht, ändert sich die Schriftfarbe von weiß zu schwarz und wieder von schwarz zu weiß, wenn ich umgekehrt gehe.

Aber was ich nicht herausfinden kann ist, dass nur ein paar Scrollen vor dem Punkt des Triggers, den ich gesetzt habe, gibt es einen weiteren Punkt, der die Farbe von weiß nach schwarz und schwarz nach weiß JUST ONCE jedes Mal ändert, wenn der Browser neu lädt was nicht möglich ist, es sei denn, der Punkt hat sich sehr schnell verschoben und ist zurückgegangen.

Es wäre einfacher zu verstehen, wenn Sie es selbst versuchen.

https://jsfiddle.net/forJ/q6u1hLoh/1/

Es hat nur einen Punkt der Änderung über der Grenze der grauen und weißen Bereich gerade sein.

Sie könnten jedoch sehen, dass jedes Mal, wenn Sie den Code ausführen, ein vorzeitiger Farbwechselpunkt JUST ONCE vor dem Sollwert auftritt. Ich denke, dass es die jQuery sein muss, die das Problem verursacht und die, die ich eingefügt habe, ist die einzige jQuery, die ich habe.

Schauen Sie sich den ganzen Code in der Verbindung an und bitte schlagen Sie mir vor, warum es einen anderen vorzeitigen Punkt des Auslösers gibt.

Danke

Answer 1

Das ist, weil Sie eine Animation auf die weiß/schwarz Klasse gebunden haben - Hinzufügen der Klasse die Animation von Schwarz auf Weiß Feuer auslöst. Sie können dies onload sehen, wenn Sie die weiße Klasse anfänglich hinzufügen.

<a href="#" class="logo links white">SANCTUM</a> 

@keyframes link_white{ 
    from {color: black;} 
    to {color:white;} 
} 

Sie die Änderung bereits in dieser Geige mit der Klasse sehen können hinzugefügt - https://jsfiddle.net/evbmhs5z/

Answer 2

Eine einfache Lösung für dieses Problem ist, wenn Sie die weiße wollen zu sehen, überprüfen Sie, ob Sie die schwarzen haben, um zu sehen, wenn also keine Notwendigkeit, das Weiß hinzuzufügen, und dann muss die Animation nicht feuern.

Hier ist ein Beispiel, ich habe es auch aktualisiert, so dass es tut, was @clearlight vorgeschlagen, waren die Farbe jedes Elements ändert eher als alles.

$(window).ready(function(){ 
 
    let fc = $('.first-section').height(); 
 
    console.log(fc); 
 
    $(window).scroll(function() { // check if scroll event happened 
 
    \t \t var st = $(window).scrollTop(); 
 
     $('.links').each(function() { 
 
     \t var $t = $(this); 
 
      var black = $t.offset().top > fc; 
 
      $t.toggleClass('white', !black && $t.hasClass('black')); 
 
      $t.toggleClass('black', black); 
 
     }); 
 
    }); 
 
});

*{ 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.container{ 
 
    width: 100%; 
 
    height: 100%; 
 
    border: 0; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.links{ 
 
    padding: 8px 8px 8px 0; 
 
    text-decoration: none; 
 
    font-size: 17px; 
 
    color: white; 
 
    display: block; 
 
} 
 

 
.sidenav{ 
 
    height: 100%; 
 
    width: 250px; 
 
    position: fixed; 
 
    z-index: 1; 
 
    top: 0; 
 
    left: 0; 
 
    padding-top: 120px; 
 
    padding-left: 80px; 
 
} 
 

 
.first-section{ 
 
    background-color: grey; 
 
    width: inherit; 
 
    height: 800px; 
 
    margin: auto; 
 
} 
 

 
.contents-section{ 
 
    height: 400px; 
 
    width: inherit; 
 
    margin: auto; 
 
    z-index: 3; 
 
} 
 

 
.content-div{ 
 
    width: 50%; 
 
    height: inherit; 
 
    z-index: 2; 
 
    float: left; 
 
    margin: auto; 
 
    float: left; 
 
    padding-top: 100px; 
 
} 
 

 
.content-text-right{ 
 
    height: auto; 
 
    max-width: 400px; 
 
    margin: 50px 50% 0 50px; 
 
} 
 

 
.content-text-left{ 
 
    height: auto; 
 
    max-width: 400px; 
 
    margin: 0 50px 0 50%; 
 
} 
 

 
@keyframes link_black{ 
 
    from {color: white;} 
 
    to {color: black;} 
 
} 
 

 
@-webkit-keyframes link_black{ 
 
    from {color: white;} 
 
    to {color: black;} 
 
} 
 

 
@-moz-keyframes link_black{ 
 
    from {color: white;} 
 
    to {color: black;} 
 
} 
 

 
@keyframes link_white{ 
 
    from {color: black;} 
 
    to {color:white;} 
 
} 
 

 
@-webkit-keyframes link_white{ 
 
    from {color: black;} 
 
    to {color:white;} 
 
} 
 

 
@-moz-keyframes link_white{ 
 
    from {color: black;} 
 
    to {color:white;} 
 
} 
 

 
.links.black{ 
 
    animation-name: link_black; 
 
    animation-duration: 1s; 
 
    animation-fill-mode: forwards; 
 

 
    -webkit-animation-name: link_black; 
 
    -webkit-animation-duration: 1s; 
 
    -webkit-animation-fill-mode: forwards; 
 
    
 
    -moz-animation-name: link_black; 
 
    -moz-animation-duration: 1s; 
 
    -moz-animation-fill-mode: forwards; 
 
} 
 

 
.links.white{ 
 
    animation-name: link_white; 
 
    animation-duration: 1s; 
 
    animation-fill-mode: forwards; 
 
    
 
    -webkit-animation-name: link_white; 
 
    -webkit-animation-duration: 1s; 
 
    -webkit-animation-fill-mode: forwards; 
 
    
 
    -moz-animation-name: link_white; 
 
    -moz-animation-duration: 1s; 
 
    -moz-animation-fill-mode: forwards; 
 
} 
 

 
@media screen and (max-width:1600px){ 
 
.first-section{ 
 
    background-image: url("kitchen.jpg"); 
 
    width: inherit; 
 
    height: 700px; 
 
    margin: auto; 
 
    background-repeat: no-repeat; 
 
    background-size: 100%; 
 
} 
 
} 
 

 
@media screen and (max-width:1400px){ 
 
.first-section{ 
 
    background-image: url("kitchen.jpg"); 
 
    width: inherit; 
 
    height: 525px; 
 
    margin: auto; 
 
    background-repeat: no-repeat; 
 
    background-size: 100%; 
 
} 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<body> 
 
     <div id="sidenav" class="sidenav"> 
 
      <a href="#" class="logo links">SANCTUM</a> 
 
      <a href="#" class="links">About</a> 
 
      <a href="#" class="links">Services</a> 
 
      <a href="#" class="links">Clients</a> 
 
      <a href="#" class="links">Portfolio</a> 
 
      <a href="#" class="links">Blog</a> 
 
      <a href="#" class="links">Contact</a> 
 
     </div> 
 
     <div class="first-section"> 
 

 
     </div> 
 
     <div id="first-content" class="contents-section"> 
 
      <div class="content-div left"> 
 
       
 
      </div> 
 
      <div class="content-div"> 
 
       <div class="content-text-right"> 
 
        <h2>What is Lorem Ipsum?</h2> 
 
        <p> 
 
         Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. 
 
        </p> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </body>