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

Question

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

Answer 1

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

1.blog .sidebar不具有作为CCD_ 4的属性。请添加它。像这样。

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

稍后谢谢我。

Answer 2

您可以创建一个指定侧边栏样式的自定义样式表，也可以添加一个内联CSS代码"位置：粘性；到您的侧边栏元素/容器。

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

.stickySidebar{ position: sticky; }

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

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