Question

我目前正致力于基于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。

解决这个问题的一个选择可能是将标题放在侧边栏滑入的区域上方，这样它们就不会受到影响，但这不是我想要的：我希望侧边栏能够推开一切< / em>的

我该如何解决这个问题？这有可能吗？

Answer 1

考虑这篇文章： Applying snap.js to my main content wrapper seems to break *some* of my jQuery functions

Bootstraps affix.js监听$（窗口）.on（＆＃39; scroll＆＃39; ...事件.Snap.js似乎改变了＆＃34; window＆＃34;元素中的可滚动元素添加＆＃34; snap-content＆＃34;类的元素。我没有看到任何其他解决方案来编写bootstrap提供的粘性功能。

使用此作为参考。根据您当前的滚动位置（以像素为单位），您可以将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");
        }
    }
});

}）;

如何将滑入式面板与粘性割台相结合？

1 个答案: