使用body{ overflow-x: hidden; }时，position:sticky无效。

Question

使用body{ overflow-x: hidden; }时，position:sticky无效。

8

我正在尝试使用Bootstrap的粘性标题。但是，当我添加了 body {overflow-x：hidden;} 时，它停止工作。

现在我看到不同页面上说 position：sticky 和其父级设置为除 visible 以外的其他 overflow 值时不显示，这是（或曾经是）一个常见问题。但是所有帖子都像1年前发布的一样。就像这篇文章：“Position Sticky with overflow-x set for parent div”

现在有解决方案吗？自从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>

- Jeremy

3个回答

0

据我所知，目前你不能使用它。仍然只在一些浏览器中部分支持。

当你想知道这个特性的发展到了何种程度时，我建议你去 caniuse.com 查看。

粘性特性：https://caniuse.com/#feat=css-sticky。

- Michael Walter

哦，那么它在我的Chrome上是如何工作的？我看到一些大型网站使用了Bootstrap的sticky-top类，这让我认为它应该得到了一定的支持。 - Jeremy

他们可能还在使用JS。https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_sticky_header - Michael Walter

1

好的，谢谢提供信息。那么我猜我不能使用sticky类了。我想我会在页面滚动超过100vh时使用fixed-position。 - Jeremy

一年后，position: sticky已经不再是实验性质的CSS属性，并且在大多数浏览器中都有良好的兼容性（除了IE）。 - protoEvangelion

-1

目前还没有本地化的解决方案。

不过，我为这些情况编写了一个备用脚本： fl_sticky

- Fabian von Ellerts

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- protoEvangelion · Accepted Answer

更新：

在Safari v12.0.2、Firefox v64.0和Chrome v71.0.3578.98上成功测试。

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

简单的解决方案是仅在body上使用overflow-x: hidden;，而不是在html元素上使用。在关于溢出和粘性定位的规范清晰度讨论中，这篇令人惊叹的评论帮助我找到了答案。

所以一定要从html元素和任何祖先元素中删除它，并确保从您想要粘性定位的元素中也删除它。我在这里更深入地介绍了祖先问题：https://dev59.com/W1YN5IYBdhLWcg3wqpqH#54116585。

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

我复制了你的片段，并进行了调整，现在在打开和关闭上的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>