更新：
这已经在Safari v12.0.2,Firefox v64.0和Chrome v71.0.3578.98成功测试
添加职位：-webkit-sticky;用于Safari.
不幸的是，规范不太清楚overflow-x：hidden意思；粘在位置，但有办法解决这个问题.幸运的是，有一个问题可以解决：https://github.com/w3c/csswg-drafts/issues/865.
简单的解决方案是删除或取消设置overflow-x：hidden;粘性；粘性；.然后你可以有overflow-x：hidden;它会在身体上工作！
/*
Try commenting out overflow on body style and uncommenting
overflow on .overflow-x-hidden class and you will see
position sticky stop working!
*/
body {
overflow-x: hidden;
}
.overflow-x-hidden {
/* overflow-x: hidden; */
border: 1px solid blue;
}
h1 {
background: palevioletred;
color: #fff;
position: -webkit-sticky;
position: sticky;
top: 0;
}
.tall {
background: linear-gradient(to bottom,paleturquoise,white);
height: 300vh;
width: 100%;
}
总结
如果您认为编程之家的网站内容很好，请向程序员朋友推荐编程之家的网站。
本图文内容来源于网友网络收集整理，作为学习参考，版权属于原作者。
个人微信号小编 jb51ccc
喜欢与人分享编程技术与工作经验，欢迎加入编程之家官方交流群！