如何將滑入式面板與粘性頭結合起來？

Question

我目前正在對具有以下要求的基於CSS-3欄佈局：

• 在桌面上...
  • ...所有列所示。
• 在移動設備...
  • ...只有中間列中示出。
  • ...左列可以從左側滑入，由按鈕上的輕掃或輕擊觸發。
  • ...右側的列可以從右側滑入，由按鈕上的輕掃或輕擊觸發。
• 獨立於設備...
  • ...中間一列中包含三個行：主標題，子標題和實際內容。
  • ...當向下滾動時，主標題會滾動。
  • ...向下滾動時，子標題粘在屏幕的頂部。

現在我想實現這個：

• 創建三欄佈局和隱藏左，右列是容易的，使用引導。
• 中間的三列也很容易。
• 爲了使該子頭粘，我有兩個選擇：
  • 使用position: sticky（最好在技術方面的解決方案，而不是由任何瀏覽器支持）。
  • 使用腳本，附加到scroll事件並根據需要更改爲position: fixed。 Bootstrap以其affix插件提供OOTB。使用這個插件，這也是一件容易的事。
• 使用諸如Snap.js之類的東西，創建兩個側邊欄並將其滑入也很容易。

當我想將粘性子標題與滑動側邊欄組合時，問題就出現了：affix插件停止工作，並且子標題不再粘滯。基本上，問題歸結爲CSS transform和position: fixed的問題，請參見Eric Meyer's awesome blog post on this和this answer。

解決此問題的一個選項可能是將標題放在側邊欄滑入的區域上方，以免它們受到影響，但這不是我想要的：我想讓側邊欄將的所有內容全部推開。

我該如何解決這個問題？這可能嗎？

Answer 1

考慮這個帖子： Applying snap.js to my main content wrapper seems to break *some* of my jQuery functions

白手起家affix.js監聽$（窗口）。在（「滾動」 ......事件Snap.js似乎在滾動的元素，從「窗口」改變元素添加到您添加「snap-content」類的元素中，我沒有看到任何其他解決方案來編寫由引導程序提供的粘性功能

將此用作參考根據您當前的滾動位置像素），你可以添加CSS屬性，甚至整個CSS類到你想要粘的元素：

jQuery(document).ready(function ($) { 
$('.snap-content').scroll(function() { 
    if ($(this).scrollTop() > 140) { 
     if ($("#navbar").css('position') !== 'fixed') { 
      $("#navbar").css("position", "fixed"); 
     } 
    } else { 
     if ($("#navbar").css('position') !== 'static') { 
      $("#navbar").css("position", "static"); 
     } 
    } 
}); 

}）;