jQuery（document）.ready仍在文檔准備好之前運行嗎？
[英]JQuery (document).ready still runs before the document is ready?
問題描述
在進行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/
在灰色和白色區域的邊界上方僅需要一個更改點。
但是，您將能夠看到，每次運行代碼時，都會在設定點之前出現一次過早的顏色變化點。 我認為這必須是導致問題的jQuery，而我粘貼的是我僅有的jQuery。
不過，請隨時查看鏈接中的整個代碼，並向我建議為什么還有另一個過早的觸發器點。
謝謝
2 個解決方案
解決方案1
2 已采納 2017-02-03 23:53:29
這是因為您在白/黑類上附加了動畫-添加該類會觸發動畫從黑到白觸發。 如果最初添加白色類，則可以看到這種情況在加載時發生。
<a href="#" class="logo links white">SANCTUM</a>
@keyframes link_white{
from {color: black;}
to {color:white;}
}
您可以看到此提琴中已添加的類的更改-https: //jsfiddle.net/evbmhs5z/
解決方案2
1 2017-02-04 00:13:24
一個簡單的解決方案是查看是否要使用白色，檢查是否有黑色，如果需要，則無需添加白色，然后動畫就不需要觸發。
這是一個示例，我也對其進行了更新，因此它執行了@clearlight的建議，即每個項目的顏色發生了變化，而不是全部發生了變化。
$(window).ready(function(){ let fc = $('.first-section').height(); console.log(fc); $(window).scroll(function() { // check if scroll event happened var st = $(window).scrollTop(); $('.links').each(function () { 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>
JQuery - $（document）.ready（）執行BEFORE元素加載
[英]JQuery - $(document).ready() executing BEFORE element load
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.