Question

我有header和sidebar div块，为了满足我们的特殊需求，我需要在滚动事件触发后将两个元素都放在顶部。

将单个元素粘贴是没有问题的，但如果有多个元素，它会阻止滚动操作并继续跳回到顶部。

如果不使用插件，有什么好的解决方案吗？

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

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

Answer 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

Answer 2

添加

的更简单的HTML / CSS解决方案

position: fixed;

从一开始就

到两个div容器。因此，无论用户是否已经滚动，它们总是被修复。请在此处查看解决方案：http://jsfiddle.net/N4maR/3/

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

Answer 3

惊讶的答案很少。

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

还有很多原因可以使粘滞“失败”或破裂。这个question有很多场景。

滚动上的多个粘性元素

3 个答案: