更新:
这已经在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%;
}