滚动上的多个粘性元素

我有header和sidebar div块，对于我们的特定需求，我需要在滚动事件触发时将两个元素粘在顶部。滚动上的多个粘性元素

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

有没有什么好的解决方案，而不使用插件？

这里是我的JS Fiddle

而且，下面是用单个元素行之有效的脚本。

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

来源

2014-03-26 Seong Lee

更多类似这样的：

$(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

来源

2014-03-26 23:03:51 ZzaichikK

一个更简单的HTML /只CSS的解决办法是，以

position: fixed;

同时添加到DIV容器从一开始就是这样。因此，无论用户是否已经滚动，它们总是固定的。看到这里的解决方案：http://jsfiddle.net/N4maR/3/

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

来源

2014-03-26 23:21:59

谢谢。对于我的工作设置，除了我在演示中制作的这个头文件之外，还有另一个全局头文件，并且我们试图在滚动时丢失全局头文件并替换为演示文件头文件。 –

啊，现在我明白了。 –

所以这可能会对你感兴趣：http://stackoverflow.com/questions/18382496/sticky-header-after-scrolling-down –

滚动上的多个粘性元素

回答

相关问题