如果元素在固定位置元素後面滾動

如何判斷元素是否在頂部固定的另一個元素後面滾動？如果元素在固定位置元素後面滾動

我想要做的是當一個元素位於一個固定元素下方並且每個高度或scrollTop之後運行一些javascript。

我想做一個粘性頭，但我不能只是做一個scrollTop固定定位，因爲我的粘滯定位的元素被推下視口變小，這意味着需要不同的scrollTop來修復然後元素。

這就是爲什麼我認爲當元素位於已經固定在頂部的元素下時，修復/粘貼元素會更容易。

我曾嘗試： position:sticky;其供應商的前綴與這兩個polyfills：

來源

2014-03-06 gomangomango

看一看置頂盒，它看起來像它有足夠快的您需要處理您的情況的功能：http://leafo.net/sticky-kit/

最重要當你的內容改變時，你可以提出一個事件來告訴它重新計算粘性位置。

例如：

$(window).on('resize', function(){ 
    $(document.body).trigger('sticky_kit:recalc'); 
});

編輯：

我有一個快速瀏覽一下您的網站。

爲了得到這個工作，你需要將你的#filter和#main元素共享父<body>下 - 所以不是<body>直接子：

<body> 
    <div> 
     <section id="filter"> 
      ... 
     </section> 
     <main id="main"> 
      ... 
     </main> 
    </div> 
</body>

然後在您main.js文件中刪除整個$(window).scroll()處理程序，它不是必需的。在大多數情況下，讓粘包處理的計算，其中的元素都需要坐：

// Removed $(window).scroll(...) 
$('#filter').stick_in_parent(); 

$(window).on('resize', function(){ 
    $(document.body).trigger('sticky_kit:recalc'); 
});

最後，您將需要提高「sticky_kit：重新計算」事件後，你的動畫和slideToggle效果已經完成，以確保固定的元素最終在正確的位置。如果你不這樣做，那麼你的粘性元素將嘗試覆蓋整個頁面或做其他奇怪的事情。

祝你好運！

來源

2014-03-06 03:44:37

我認爲這是正確的解決方案，但我遇到了一些問題實施。在這裏：http://irfandesign.com/dev/點擊「瞭解更多關於我」或「工作」，然後在頁面上會出現「header nav ul」。我試圖修復'＃filter'，當它碰到'header nav ul'時，它是固定的，並保持'＃filter'固定爲用戶向下滾動。但是，當用戶向上滾動並出現「＃filter」上方的內容時，請將其解除固定。我已經嘗試過，但不工作的是在main.js中：http://irfandesign.com/dev/js/main.js。我將不勝感激任何和所有幫助解決它並解決它。 – gomangomango

非常感謝您的幫助！我得到它的工作！ – gomangomango

如果元素在固定位置元素後面滾動

回答

相關問題