position: sticky breaks for tall content
本问题已经有最佳答案,请猛点这里访问。
我很难让
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不能正确粘附?
用父级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不会漂浮在"内容"上。
您可以在此中篇文章中找到有关其工作原理的很好的解释