html body overflow,html – body {overflow-x：hidden;打破位置：粘滞

更新：

这已经在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%;

}

I want to be sticky!