Javascript 标题固定抖动时向下滚动

我正在尝试

修复
标题部分。我能够做到这一点，但在使用JS添加新类时，它会震动。它从
top:0开始。由于这个原因，从顶部开始摇晃时看起来很奇怪。我希望它能平稳地固定在顶部，不会影响参观者的眼睛。就像这个网站一样

这是我的名片


$（窗口）.load（函数（）{
$（窗口）。滚动（函数（）{
如果（$（窗口）.scrollTop（）>0）{
if（！（$（'#scroller'）.hasClass（'is-sticky'））{
$（“#滚动条”）
.addClass（'is-sticky'）
.css（'top'，9）
.制作动画({
"热门":84
},'1000');
}
}否则{
if（$（'#scroller'）.hasClass（'is-sticky'））{
$（“#滚动条”）
.removeClass（'is-sticky'）
.css（'top'，9）
.制作动画({
"热门":84
},1000);
}
}
});
});
正文{
高度：1000px；
保证金：0；
填充：0；
位置：相对位置；
}
#卷轴{
位置：绝对位置；
左：0；
顶部：84px；
宽度：100%；
z指数：30；
背景：#CCC；
高度：20px；
}
#scroller.is-sticky{
位置：固定；
宽度：100%；
左：0；
顶部：9px；
利润上限：-31px；
高度：53px；
z指数：701；
背景：#CCC；
不透明度：.97；
过滤器：α（不透明度=97）；
-webkit盒阴影：0px 2px 5px 0px rgba（0,0,0,0.1）；
-moz盒阴影：0px 2px 5px 0px rgba（0,0,0,0.1）；
盒影：0px2px5px0pxRGBA（0,0,0,0.1）；
}

一些控件
当达到84时，您必须检查
.scrollTop
。此外，您不需要使用jquery
.animate
函数，您可以通过css
transition
实现这种效果

从你链接的网站上看，效果其实很容易做到

首先，您希望标题元素具有
位置：fixed
；无需通过javascript动态添加此内容。默认情况下，它应该具有此属性（如您链接的网站中所示）

他们所做的是将顶部导航隐藏在某个滚动点的
标题中

您可以使用jquery非常简单地完成这项工作



var$el=$（'header.two'）；
$（窗口）。滚动（函数（）{
如果（$（this）.scrollTop（）>200）{
$el.addClass（'hide'）；
}否则{
$el.removeClass（“隐藏”）；
}
});
*{
-moz框大小：边框框；
-webkit框大小：边框框；
框大小：边框框；
}
身体{
保证金：0；
填充：0；
}
标题{
位置：固定；
排名：0；
左：0；
宽度：100%；
文本对齐：居中；
}
头球，一号{
高度：20px；
宽度：100%；
背景：石灰；
位置：相对位置；
z指数：10；
}
标题。一。隐藏{
身高：0；
}
头球，2{
背景：红色；
高度：40px；
位置：相对位置；
z指数：20；
-webkit转换：-webkit转换.25s；
转变：转变.25s；
}
头，2，隐藏{
-webkit转换：translateY（-20px）；
转换：translateY（-20px）；
}
主要{
背景：浅蓝色；
高度：1200px；
宽度：100%；
填充顶部：60px；
}

div
固定的
内容
页脚
您可以创建一个固定导航栏，并将其垂直分为两部分，当用户滚动时，只需使用
.slideUp（）
动画隐藏上面的部分，当用户再次在顶部滚动时，使用
.slideDown（）动画显示。
代码如下：


$（窗口）.load（函数（）{
$（窗口）。滚动（函数（）{
如果（$（窗口）.scrollTop（）>0）{
//检查是否可访问
如果（$（“#要隐藏的导航部分”）。是（“：可见”）{
//如果是，那么让我们隐藏它
$（“#要隐藏的导航部分”）.slideUp（）；
}
}否则{
如果（！$（“#要隐藏的导航部件”）是（“：可见”）{
$（“#要隐藏的导航部分”）.slideDown（）；
}
}
});
});
正文
{
高度：1000px；
}
#粘性导航条
{
位置：固定；
排名：0；
左：0；
宽度：100%；
高度：80px；
}
#要隐藏的导航部分
{
高度：40px；
宽度：100%；
背景：#333；
颜色：#fff；
}
#导航部分停留
{
高度：40px；
宽度：100%；
背景:#bbb ;；
颜色：#333；
}

这个探险者藏了起来
这篇文章仍在第页
@Lemon Kazi它能解决你的问题吗？你为什么在回答中征求OP的回复，而他没有发表评论？你误用了评论系统；有你代表级别的人不应该这样做…@alirezasafian是的，你的答案也正确。我删除了动画功能并应用了过渡+谢谢你的回答。我的网站在这里，我想隐藏标题的上半部分。当滚动。谢谢你的帮助我正在尝试。我应用了你的代码。这不是动画。如果我错过了任何建议。@LemonKazi如果你点击RunCodeSnippet，我提供的代码可以工作，所以我认为这段代码没有问题。该网站有一个很长的代码，我没有时间去看它，所以我真的不知道你在这方面哪里出错了。但从网站的行为来看，似乎当用户向下滚动时，包含搜索栏的div必须固定在顶部，而当页面加载时，它并不是固定在顶部，当您滚动时它是固定的，所以将搜索栏div放在页面的固定部分。