Javascript 延迟addClass jQuery

我已经创建了一个带有页眉的粘性滚动导航，页眉上方会缩小。现在，当导航变得粘糊糊的时候，我试着让标志从左边进入。它起作用了，但来得太早了。如果你有一个在我的演示你可以看到，它来了头，我不想。我有没有办法把它推迟到导航被固定到顶部

演示：

$（文档）.on（“滚动”，函数（）{
如果（$（文档）.scrollTop（）>20）{
$（“标题”）.addClass（“收缩”）；
//setTimeout（函数（）{
$（“.logo_动画”）.addClass（“logo_显示”）；
//}, 900);
}否则{
$（“标题”）.removeClass（“收缩”）；
$（“.logo_动画”）.removeClass（“logo_显示”）；
}
});
*{
保证金：0；
填充：0；
}
html{
宽度：100%；
身高：100%；
}
身体{
宽度：100%；
身高：100%；
}
#头部背景{
宽度：100%；
背景色：#111；
位置：固定；
排名：0；
左：0；
z指数：1；
}
标题{
宽度：1200px；
高度：100px；
保证金：1em自动；
文本对齐：居中；
溢出：隐藏；
过渡：所有0.8秒都易于输入输出；
-webkit过渡：所有0.8秒都易于输入输出；
-moz转换：所有0.8秒都易于输入输出；
-o型过渡：所有0.8秒均易于输入输出；
-ms转换：所有0.8秒均易于输入输出；
}
.形象{
显示：内联块；
保证金：0自动；
最大宽度：322px；
最大高度：100%；
垫面：5px；
}
.地址信息{
浮动：左；
颜色：#fff；
宽度：250px；
文本对齐：左对齐；
字号：1rem；
垫面：5px；
左：1%；
背景色：浅绿色；
}
.头部图标{
浮动：对；
列表样式类型：无；
显示：块；
宽度：250px；
文本对齐：右对齐；
背景色：浅绿色；
}
.李先生{
显示：内联块；
右：3%；
}
.李安{
颜色：#fff；
字体大小：2.5rem；
}
.头部图标li:n第n个孩子（4）{
显示：块；
边缘顶部：0.5雷姆；
颜色：#fff；
字号：1rem；
}
.收缩{
身高：0；
边际上限：0；
页边距底部：0；
}
导航{
显示：块；
宽度：100%；
背景色：#777；
字号：0；
}
导航ul{
溢出：隐藏；
颜色：#fff；
文本对齐：居中；
-webkit过渡：最大高度0.4s；
-ms过渡：最大高度0.4s；
-moz过渡：最大高度0.4s；
-o型过渡：最大高度0.4s；
过渡段：最大高度0.4s；
}
李国荣{
显示：内联块；
填充：1rem2rem；
}
海军ulli a{
颜色：继承；
文字装饰：无；
字体大小：1.5rem；
}
.固定{
位置：固定；
排名：0；
左：0；
右：0；
}
.汉堡纽扣{
宽度：100%；
文本对齐：右对齐；
框大小：边框框；
填充：0.5雷姆；
光标：指针；
颜色：#fff；
字体大小：1.5rem；
显示：无；
}
.logo_动画{
位置：绝对位置；
顶部：1rem；
左边距：-20雷姆；
宽度：200px；
显示：内联块；
过渡：左边距0.5s三次贝塞尔（0.5,0,0.5,1.6）；
}
.标志展示{
左边距：1 em；
}
#身体{
高度：2000px；
}

00街道
布拉姆霍普
利兹
LS00 000




01131234567






为什么不设置时间延迟？以下是JS代码片段：

setTimeout( function(){ 
         // your function here
}, 300);

相应地设置毫秒，我输入300，将其更改为您需要的

我去了你的演示，并测试了这个，它的工作。“如果”语句不在正确的位置：

$(document).on("scroll", function() {
setTimeout(function(){
if ($(document).scrollTop() > 20) {
   $("header").addClass("shrink");
      $(".logo_animated").addClass("logo_display");
     } else {
   $("header").removeClass("shrink");
   $(".logo_animated").removeClass("logo_display");
}} , 900);
});

为什么不设置一个时间延迟呢？以下是JS代码片段：

setTimeout( function(){ 
         // your function here
}, 300);

相应地设置毫秒，我输入300，将其更改为您需要的

我去了你的演示，并测试了这个，它的工作。“如果”语句不在正确的位置：

$(document).on("scroll", function() {
setTimeout(function(){
if ($(document).scrollTop() > 20) {
   $("header").addClass("shrink");
      $(".logo_animated").addClass("logo_display");
     } else {
   $("header").removeClass("shrink");
   $(".logo_animated").removeClass("logo_display");
}} , 900);
});

就像亚伦说的。取消注释
setTimeout

或者使用CSS解决方案。您可以使用以下简单属性延迟任何
转换
：

transition-delay: 0.9s;

你的情况也是如此。在css文件中创建如下类：

.logo_display {
    margin-left: 1rem;
    transition-delay: 0.9s;
}


$（文档）.on（“滚动”，函数（）{
如果（$（文档）.scrollTop（）>20）{
$（“标题”）.addClass（“收缩”）；
//setTimeout（函数（）{
$（“.logo_动画”）.addClass（“logo_显示”）；
//}, 900);
}否则{
$（“标题”）.removeClass（“收缩”）；
$（“.logo_动画”）.removeClass（“logo_显示”）；
}
});
*{
保证金：0；
填充：0；
}
html{
宽度：100%；
身高：100%；
}
身体{
宽度：100%；
身高：100%；
}
/****************************************
****************标题*******************
****************************************/
#头部背景{
宽度：100%；
背景色：#111；
位置：固定；
排名：0；
左：0；
z指数：1；
}
标题{
宽度：1200px；
高度：100px；
保证金：1em自动；
文本对齐：居中；
溢出：隐藏；
过渡：所有0.8秒都易于输入输出；
-webkit过渡：所有0.8秒都易于输入输出；
-moz转换：所有0.8秒都易于输入输出；
-o-转换：所有0.8s轻松入内；
-ms转换：所有0.8秒均易于输入输出；
}
.形象{
显示：内联块；
保证金：0自动；
最大宽度：322px；
最大高度：100%；
垫面：5px；
}
.地址信息{
浮动：左；
颜色：#fff；
宽度：250px；
文本对齐：左对齐；
字号：1rem；
垫面：5px；
左：1%；
背景色：浅绿色；
}
.头部图标{
浮动：对；
列表样式类型：无；
显示：块；
宽度：250px；
文本对齐：右对齐；
背景色：浅绿色；
}
.李先生{
显示：内联块；
右：3%；
}
.李安{
颜色：#fff；
字体大小：2.5rem；
}
.头部图标li:n第n个孩子（4）{
显示：块；
边缘顶部：0.5雷姆；
颜色：#fff；
字号：1rem；
}
.收缩{
身高：0；
边际上限：0；
页边距底部：0；
}
/****************************************
**************航行*****************
****************************************/
导航{
显示：块；
宽度：100%；
背景色：#777；
字号：0；
}
导航ul{
溢出：隐藏；
颜色：#fff；
文本对齐：居中；
-webkit转换：max hei