Jquery 滚动条上有多个粘性元素

我有

标题

和

侧栏

div块，为了满足我们的特殊需要，我需要在滚动事件触发时使这两个元素都保持在顶部

使单个元素具有粘性是没有问题的，但如果有多个元素，则会阻止滚动动作并不断跳回顶部

不使用插件有什么好的解决方案吗

这是我的

下面是一个脚本，它可以很好地处理单个元素

$(window).on("scroll", function () {
    var fromTop = $(window).scrollTop();
    $(".sidebar").toggleClass("fixed", (fromTop > 50));
    $(".header").toggleClass("fixed", (fromTop > 50));
});

更像这样：

$(window).on('scroll', function () {

    var windowTop = $(window).scrollTop();
    var elementTop = $('.anchor').offset().top;

    if(windowTop > elementTop) {
        $(".sidebar").addClass("fixed");
        $(".header").addClass("fixed");
    } else {
        $(".sidebar").removeClass("fixed");
        $(".header").removeClass("fixed");
    }

});

---

一个更简单的HTML/CSS唯一解决方案是

position: fixed;

从一开始就连接到两个div容器。因此，无论用户是否已经滚动，它们都是固定的。请参见此处的解决方案：

---

我看不出有什么特别的原因，为什么它应该在某个阈值之后被修复？

对此答案如此之少，我感到惊讶

如果您有两个粘滞物品要作为单独的元素保存，可能在不同的包装器中，关键是将

top:50px

放在第二个粘滞物品（或第一个粘滞物品的高度）上，使其在该位置“粘滞”，而不覆盖第一个粘滞物品

---

还有很多原因导致粘性“失败”或破裂。这有很多场景。

谢谢。对于我的工作设置，除了我在演示中制作的这个标题之外，还有另一个全局标题，我们正在尝试丢失这个全局标题，并在滚动时替换为演示标题。啊，现在我有了这个想法。因此，您可能也感兴趣：不需要JavaScript解决方法。现代网络浏览器可以通过CSS

position:sticky本地处理此事件。阅读这里：如果你使用JS变体，你总是会遇到一些不必要的小故障。CSS解决方案是健壮的。