关于CSS:位置:高内容的粘性中断

 2021-04-27 

position: sticky breaks for tall content

本问题已经有最佳答案,请猛点这里访问。

我很难让position: sticky用于具有(相对)高内容的页面。在下面,我建立了一个简单的页面,其内容模拟的div是视口高度的两倍。粘性.palette在页面上正确跟踪,直到它落在屏幕顶部为止的最后几个像素为止。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
body, html {
\tmargin: 0;
\twidth: 100%;
\theight: 100%;
\tbackground: #334;
}

.palette {
\tposition: sticky;
\ttop: 0;
\twidth: 300px;
\theight: 20px;
\tbackground: orange;
\tborder-radius: 5px;
\tmargin: 10px;
}

.content {
\theight: 200vh;
\tmargin: 10px;
\tbackground: #556;
\tborder-radius: 20px;
}
1
 

不使用实际内容或以像素为单位设置.content的高度似乎都可以改变这种效果。调色板从页面开始滚动到底部的距离似乎随视口高度而变化。

为什么我的粘性div不能正确粘附?


用父级div包裹这两个div。

工作示例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
body, html {
\tmargin: 0;
\twidth: 100%;
\theight: 100%;
\tbackground: #334;
}

.palette {
\tposition: sticky;
\ttop: 0;
\twidth: 300px;
\theight: 20px;
\tbackground: orange;
\tborder-radius: 5px;
\tmargin: 10px;
}

.content {
\theight: 200vh;
\tmargin: 10px;
\tbackground: #556;
\tborder-radius: 20px;
}
1
 


位置:粘性只会漂浮在子元素上,没有父div不会漂浮在"内容"上。

您可以在此中篇文章中找到有关其工作原理的很好的解释