Jquery 滚动条上的固定位置闪烁

我有一个带有

标题

和

导航

的简单页面。在窗口滚动上，我将

标题

和

导航

设置为

固定

位置。如果页面足够长，可以滚动，一切都会顺利进行。如果页面处于某个高度，我会看到闪烁的情况

var-prev=0；
变量$window=$（window）；
var nav=$（'.context nav'）；
变量$navbar=$（'.navbar'）；
$（窗口）。滚动（功能（e）{
var scrollTop=$window.scrollTop（）；
导航切换类（'fixed'，scrollTop>=prev）；
$navbar.toggleClass（'fixed'，scrollTop>=prev）；
prev=滚动顶部；
});
*{
框大小：边框框；
填充：0；
保证金：0；
文字装饰：无；
}
html，
身体{
字号：1rem；
背景图像：线性渐变（向右，#8ca986，#789a71）；
}
.sp{
高度：700px；
}
标题{
位置：相对位置；
背景：#fff；
高度：80px；
文本对齐：居中；
盒影：0 1px 15px rgba（0,0,0,0.04），0 1px 6px rgba（0,0,0,0.04）；
过渡：所有500毫秒立方贝塞尔（0.25,0.46,0.45,0.94）0秒；
}
标题。固定{
位置：固定；
排名：0；
左：0；
右：0；
高度：60px；
}
.页面容器{
填充：2rem；
位置：相对位置；
颜色：白色；
}
.页面容器.上下文导航{
显示器：flex；
弯曲方向：行；
颜色：白色；
位置：相对位置；
边缘底部：3rem；
填充：1rem；
过渡：所有0.4s缓解；
}
.page容器。上下文导航已修复{
位置：固定；
左：0；
右：0；
顶部：60px；
背景色：rgba（255，255，255，0.08）；
}
.页面容器.上下文导航.导航项{
填充：20px；
边框：1px纯白；
右边距：1rem；
}

我的头球在这里
项目1
项目2
项目3
滚动我。。。
之所以会出现闪烁，是因为当您将元素设置为“位置固定”时，它会退出流程并更改偏移量，如果您希望在滚动时显示粘滞元素，我建议将要显示为粘滞的元素克隆到固定容器中，然后显示该容器，通过这种方式，原始元素保持在原始位置，不会导致内容跳转，我还注意到您使用计数器来显示和隐藏粘滞元素，我认为这是低效的，除非您有不同的想法

这是我很快从你手中拿出的一支密码笔，以表明我的意思：


var$window=$（window）；
变量$stickyHeader=$（'.stickyHeader'）；
var$nav=$（'.context nav'）；
var navOffset=$nav.offset（）.top；
变量$navbar=$（'.navbar'）；
var$newNavBar=$navbar.clone（）；
var$newNav=$nav.clone（）；
$stickyHeader.append（$newNavBar）；
$stickyHeader.append（$newNav）；
无功定时器；
$（窗口）。滚动（功能（e）{
中频（定时器）{
清除超时（计时器）；
}
timer=window.setTimeout（函数（）{
如果（$window.scrollTop（）>navOffset）{
$stickyHeader.addClass（'active'）；
}
否则{
$stickyHeader.removeClass（'active'）；
}
}, 100);
});
*{
框大小：边框框；
填充：0；
保证金：0；
文字装饰：无；
}
html，
身体{
字号：1rem；
背景图像：线性渐变（向右，#8ca986，#789a71）；
}
.sp{
高度：700px；
}
标题{
位置：相对位置；
背景：#fff；
高度：80px；
文本对齐：居中；
盒影：0 1px 15px rgba（0,0,0,0.04），0 1px 6px rgba（0,0,0,0.04）；
}
.活动标题{
宽度：100%；
高度：60px；
}
.页面容器{
填充：2rem；
位置：相对位置；
颜色：白色；
}
.背景导航{
显示器：flex；
弯曲方向：行；
颜色：白色；
位置：相对位置；
边缘底部：3rem；
填充：1rem；
}
.active.context导航{
左：0；
右：0；
背景色：rgba（255，255，255，0.08）；
}
.背景资产净值.资产净值项目{
填充：20px；
边框：1px纯白；
右边距：1rem；
}
.stickyHeader{
宽度：100%；
位置：固定；
身高：0；
溢出：隐藏；
顶部：-140px；
过渡：高度200ms缓和，顶部200ms缓和；
}
.stickyHeader.active{
高度：140像素；
排名：0；
}

我的头球在这里
项目1
项目2
项目3
滚动我。。。
以后请输入问题中的所有相关代码。我已经在这一刻为你做到了Hi San，谢谢你的回复。克隆使它变得更复杂一些，因为navbar，尤其是上下文nav包含的元素在用户单击表行时附加了不同的js事件。克隆时，我必须重新附加所有这些事件等，这使得代码复杂且更难维护。而且当页面足够长可以滚动时，我一点问题也没有。只有当页面高度达到一定高度时，才会出现闪烁。你肯定帮我换个角度看。谢谢您的支持。没问题，
$.clone（）
还允许您复制事件，事实上，它甚至允许您进行深度复制，这取决于您如何使用它。为了理解这个问题，请尝试在eventhandler中console.log value of
prev
，您将了解我的意思。我知道复制和深度复制。这不是问题。在网格内单击行时，将激活上下文导航获取并设置值。此外，第一次在razor视图中从动作中呈现上下文导航get。之后，ajax将更新上下文菜单等。如果我克隆，我必须维护两个副本等，这将导致意大利面条代码