在我进行网络开发的过程中，我发现了一些非常奇怪的东西。
以下是我的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 *位置到元素顶部时，如果我反过来，字体颜色会从白色变为黑色，再次从黑色变为白色。
但我无法弄清楚的是，在我设置的触发点之前只有几个滚动，每次浏览器重新加载时，还有一个点将颜色从白色变为黑色，黑色变为白色JUST ONCE除非这一点很快转移并向后移动，否则是不可能的。
如果你试试自己会更容易理解。
https://jsfiddle.net/forJ/q6u1hLoh/1/
在灰色和白色区域的边界上方只能有一个变化点。
但是，您可以看到每次运行代码时，在设定点之前都会发生过早的颜色变化点JUST ONCE。我认为它必须是导致问题的jQuery，而我粘贴的是我唯一的jQuery。
请随时查看链接中的整个代码，并请告诉我为什么还有另一个过早的触发点。
谢谢
答案 0 :(得分：2)
这是因为你有一个动画附加到白/黑类 - 添加类触发动画从黑到白。如果最初添加白色类，则可以看到这种情况发生。
<a href="#" class="logo links white">SANCTUM</a>
@keyframes link_white{
from {color: black;}
to {color:white;}
}
您可以看到已在此小提琴中添加的类的更改 - https://jsfiddle.net/evbmhs5z/
答案 1 :(得分：1)
一个简单的解决方案是看看你是否想要白色，检查你是否有黑色，如果是这样的话，不需要添加白色，然后动画不需要点亮.. < / p>
这是一个例子，我也更新了它，所以它确实是@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>