如何将滑入式面板与粘性头结合起来？

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"); 
     } 
    } 
}); 

}）;