javascript - JQuery (document).ready 仍然在文档准备好之前运行？

Question

当我在做一些网络开发的时候，我发现了一些很奇怪的事情。

下面是我的 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。

请随意查看链接中的整个代码，请向我建议为什么还有另一个过早的触发点。

谢谢

Answer 1

这是因为您有一个动画附加到白色/黑色类 - 添加该类会触发动画从黑色到白色。如果您最初添加白色类，您可以在加载时看到这种情况。

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

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

你可以看到这个 fiddle 中已经添加的类的变化 - https://jsfiddle.net/evbmhs5z/