我目前正在处理具有以下要求的基于CSS的3列布局：
在桌面上...
…显示所有列。
在移动设备上…
…仅显示中间列。
…通过滑动或轻按按钮触发，左列可以从左侧滑入。
…通过滑动或点击按钮触发，右列可以从右侧滑入。
独立于设备…
…中间列包含三行：主标题，子标题和实际内容。
…向下滚动时主标题会滚动离开。
…向下滚动时，副标题位于屏幕顶部。
现在我尝试实现这一点：
使用Bootstrap可以轻松地创建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。
解决此问题的一种方法是将页眉放在侧边栏滑入的区域上方，以使它们不受影响，但这不是我想要的：我希望侧边栏推开所有内容。
我该如何解决？这有可能吗？
最佳答案
考虑一下这篇文章：
Applying snap.js to my main content wrapper seems to break *some* of my jQuery functions
Bootstraps affix.js监听$（window）.on（'scroll'...事件。Snap.js似乎将可滚动元素从“ window”元素更改为添加了“ 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");
}
}
});
}）;