位置粘性不适用于 body{ overflow-x: hidden; }

Question

我正在尝试使用 bootstrap 的置顶贴 header。但是当我添加 body {overflow-x: hidden; } 它停止工作。

现在我在不同的页面上看到 position: sticky parent 将 overflow 设置为其他内容，因为 visible 没有显示，是（或曾经是）一个常见问题。但是所有 post 都像 1 岁一样。像这样 post：“”

现在有解决办法了吗？自从 bootstrap 4 开始使用它以来，我认为它现在得到了更多支持。

$('button').click(function() {
  if($('body').css('overflow-x') !== "hidden"){
    $('body').css('overflow-x', 'hidden');
  } else {
    $('body').css('overflow-x', 'unset');
  }
});

h1 {
  top: 50px;
  width: 100vw;
  text-align: center;
  position: absolute;
}

span{
  font-size: 15px;
}

button{
  position: fixed;
  right: 20px;
  top: 10px;
  z-index: 10;
}

nav {
  position: sticky;
  top: 0;
  height: 40px;
  background-color: green;
  margin-top: calc(100vh - 40px);
}

nav ul li {
  float: left;
  list-style-type: none;
  line-height: 40px;
  margin-right: 15px;
}

article {
  height: 200vw;
}

html {
  overflow-x: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>

<body>
  <h1>Scroll down.. <br><span>and toggle the button</span></h1>
  <button>toggle body{overflow-x;}</button>
  <nav>
    <ul>
      <li>Link#1</li>
      <li>Link#2</li>
      <li>Link#3</li>
    </ul>
  </nav>
  <article>
    Some content...
  </article>
</body>

</html>

Answer 1

据我所知，您现在不能使用它。某些浏览器仍然只部分支持它。

当你想知道这个功能有多远时，我可以建议你在caniuse.com上查看。

置顶功能：https://caniuse.com/#feat=css-sticky

Answer 2

这个问题仍然没有本地解决方案。

但是，我为这些情况写了一个后备脚本： fl_sticky

Answer 3

更新：

已在 Safari v12.0.2、Firefox v64.0 和 Chrome v71.0.3578.98

上成功测试

为 Safari 添加了 position: -webkit-sticky;。

简单的解决方案 是在 body 而不是 html 元素上只有 overflow-x: hidden;。 Here is the amazing comment 埋头于使规范更清晰地讨论溢出和位置粘性，这帮助我解决了这个问题。

因此 确保将其从 html 元素 以及您想要粘附的元素的所有祖先元素中移除。我在这里更深入地发布了关于祖先问题的帖子：https://whosebug.com/a/54116585/6502003。

我已经在 Firefox、Chrome 和 Safari 上对此进行了测试。确保也为 Safari 添加前缀。

我在此处复制了您的代码段并进行了我提到的调整，当您在 body 上打开和关闭 overflow-x: hidden; 时，它在两种情况下都有效。

$('button').click(function() {
  if($('body').css('overflow-x') !== "hidden"){
    $('body').css('overflow-x', 'hidden');
  } else {
    $('body').css('overflow-x', 'unset');
  }
});

h1 {
  top: 50px;
  width: 100vw;
  text-align: center;
  position: absolute;
}

span{
  font-size: 15px;
}

button{
  position: fixed;
  right: 20px;
  top: 10px;
  z-index: 10;
}

nav {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  height: 40px;
  background-color: green;
  margin-top: calc(100vh - 40px);
}

nav ul li {
  float: left;
  list-style-type: none;
  line-height: 40px;
  margin-right: 15px;
}

article {
  height: 200vw;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>

<body>
  <h1>Scroll down.. <br><span>and toggle the button</span></h1>
  <button>toggle body{overflow-x;}</button>
  <nav>
    <ul>
      <li>Link#1</li>
      <li>Link#2</li>
      <li>Link#3</li>
    </ul>
  </nav>
  <article>
    Some content...
  </article>
</body>

</html>

位置粘性不适用于 body{ overflow-x: hidden; }

Position sticky not working with body{ overflow-x: hidden; }

css

css-position

更新：