滚动上的多个粘性元素答案

【问题标题】：Multiple sticky elements on scroll滚动上的多个粘性元素
【发布时间】：2014-03-26 21:51:36
【问题描述】：

我有 header 和 sidebar div 块，为了满足我们的特定需求，一旦滚动事件触发，我需要让这两个元素都粘在顶部。

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

在不使用插件的情况下有什么好的解决方案吗？

而且，以下是适用于单个元素的脚本。

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

【问题讨论】：

不需要 JavaScript 变通方法。现代 Web 浏览器可以使用 CSS position: sticky; 本地处理此事件。在这里阅读：developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/… 如果您使用 JS 变体，您总会遇到一些不需要的故障。 CSS 解决方案非常强大。

标签： jquery css

【解决方案1】：

更多这样的：

$(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");
    }

});

JS Fiddle

【讨论】：

【解决方案2】：

一个更简单的 HTML/CSS-only 解决方案是添加

position: fixed;

从一开始就到两个 div 容器。因此，无论用户是否已经滚动，它们总是固定的。在此处查看解决方案：http://jsfiddle.net/N4maR/3/

我没有看到为什么应该在某个阈值之后修复它的特殊原因？

【讨论】：

谢谢。对于我的工作设置，除了我在演示中制作的这个标头之外，还有另一个全局标头，我们正在尝试丢失该全局标头并在滚动时替换为演示标头。
啊，我明白了。
所以你可能也会感兴趣：stackoverflow.com/questions/18382496/…

【解决方案3】：

惊讶于这个问题的答案如此之少。

如果您有两个要作为单独元素保留的粘性项目，可能在不同的包装器中，关键是将top: 50px 放在第二个粘性项目（或第一个的高度）上，这样它就会“卡住”在那个位置并且不覆盖第一个。

粘性“失败”或损坏的原因也很多。这个question 有很多场景。

【讨论】：