如何使侧边栏在滚动时具有粘性

Question

我使用这个 Bootstrap 主题

preview link

但是我无法在滚动时将侧边栏作为粘性侧边栏。

Answer 1

您可以制作自定义样式表来指定侧边栏样式，也可以向侧边栏元素/容器添加内联 CSS 代码“位置：粘性”。

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

.stickySidebar{ position: sticky; }

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

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

Answer 2

你的代码有一个小漏洞。众所周知，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.
}

稍后谢谢我。