要实现当滚动到 block-43 时才启用 sticky 效果,如果要使用纯CSS实现,可以利用CSS的position: sticky和父元素的特性。以下是修改后的CSS:
亲测可用;非常完美。
“`css
.sidebar-main {
position: relative;
height: 100%;
}
block-46 {
position: relative;
}
block-43 {
position: sticky;
top: 40px;
max-height: calc(100vh – 40px);
overflow-y: auto;
padding: 10px;
font-size: 0.9rem;
border-left: 1px solid #dddddd;
}
toc {
margin: 0;
padding: 0;
list-style-type: none;
}
“`
为何要父元素也一起设置?为父元素设置定位有两个重要原因:
css
.sidebar-main {
position: relative; /* 创建定位上下文 */
height: 100%; /* 确保有足够高度让子元素滚动 */
}
- 创建定位上下文:
- position: sticky 的元素需要参照最近的具有滚动机制的祖先元素
- 设置父元素 position: relative 可以创建一个新的定位上下文
-
这样 sticky 元素就会在这个父容器内滚动,而不是相对于视口或其他容器
-
确保滚动空间:
- 如果父元素没有足够的高度,sticky 元素可能无法正常工作
- 设置 height: 100% 确保父容器有足够的高度来容纳滚动内容
如果不设置父元素的这些属性,sticky 效果可能会:
– 无法找到正确的滚动参照物
– 在错误的位置停止粘附
– 完全不起作用
此方法为纯CSS。记得Astra设置里不要开启“启用置顶侧边栏”,否则与代码的CSS方案,就冲突了。