如何使侧边栏在滚动时保持粘性？答案

【问题标题】：How to make a sidebar sticky on scroll?如何使侧边栏在滚动时保持粘性？
【发布时间】：2021-03-17 09:01:49
【问题描述】：

我正在使用these Bootstrap 主题，但滚动时无法将侧边栏作为粘性侧边栏。

【问题讨论】：

没有研究？不费吹灰之力？没有答案。对不起。

【解决方案1】：

您的代码中有一个小漏洞。众所周知position:sticky只有在没有父元素的时候才支持overflow:hidden。我查看了您的网站，发现了一些错误。

1 .blog .sidebar 没有 position: sticky 的属性。请添加它。像这样。

.blog .sidebar {
  padding: 30px;
  margin: 0 0 60px 20px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  position: sticky; // Newly Added CSS
  top: 0; // Newly added css
}

2 像这样从部分 css 中删除 overflow:hidden。

section {
    padding: 60px 0;
    /* overflow: hidden; */ // Remove this.
}

稍后谢谢我。

【讨论】：

【解决方案2】：

您可以制作自定义样式表来指定侧边栏样式，也可以将内联 CSS 代码“position:sticky”添加到侧边栏元素/容器中。

对于前者，将自定义类添加到您的侧边栏容器（例如<div class="stickySidebar"><ul>...</ul></div>）并在您的 CSS 样式表中添加 position:sticky：

.stickySidebar{ position: sticky; }

或者如果您想在不执行这些步骤的情况下查看结果，请在侧边栏容器中添加内联 CSS：

<div class="sidebar" style="position: sticky;">

【讨论】：