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

Question

我使用这个 Bootstrap 主题

预览链接

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

Answer 1

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

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

.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.
}

稍后谢谢我。