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>