滾動上的多個粘性元素

我有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 –

滾動上的多個粘性元素

回答

相關問題