JQuery（document）.ready在文檔準備好之前仍然運行？

Question

當我在做一些web開發時，我發現了一些非常奇怪的東西。所以下面

是我的jQuery代碼

$(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"); 
     } 
    }); 
}); 

所以它只是獲取從上一段距離觸發添加和刪除類。必須只有一個點被觸發，除非網站的結構動態變化，我認爲這在我的代碼中是不可能的。

所以問題在於它最終工作正常。當它從窗口頂部通過0.75 *位置到元素頂部時，如果我反過來，字體顏色會從白色變爲黑色，再從黑色變爲白色。

但我無法弄清楚的是，在我設定的觸發點之前只有幾個滾動條，還有一點將顏色從白色變爲黑色，黑色變爲白色每次瀏覽器重新加載這是不可能的，除非該點很快轉移並移回。

如果你嘗試自己，這會更容易理解。

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

必須有隻有一個剛剛灰色和白色區域的邊界以上變化的點。

但是，您將會看到每次運行代碼時，在設定點之前出現JUST ONCE過早的顏色變化點。我認爲它必須是導致問題的jQuery，而我粘貼的是我所擁有的唯一jQuery。

請不要隨意查看鏈接中的整個代碼，並請告訴我爲什麼還有另一個觸發點。

謝謝

Answer 1

這是因爲你必須附加到白色/黑色類動畫 - 添加該類觸發動畫從黑色到火成白色。如果您最初添加白色類，您可以看到這發生在onload上。

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

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

你可以看到在這個小提琴已經添加了類的變化 - https://jsfiddle.net/evbmhs5z/

Answer 2

一個簡單的解決方法是，看看如果你想白，檢查，看看是否有黑，如果所以不需要添加白色，然後動畫不需要着火..然後動畫不需要着火..

這裏是一個例子，我也更新了它，所以它做@clearlight建議，每個項目的顏色改變而不是全部。

$(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>