Question

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

现在我在不同的网页上看到position: sticky的父母将overflow设置为visible未显示的其他内容，是（或曾经是）常见问题。但所有的帖子都像1岁。喜欢这篇文章：＆＃34; Position Sticky with overflow-x set for parent div＆＃34;

现在有解决方案吗？由于bootstrap 4开始使用它，我认为它现在更受支持。

＆＃13;

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

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 1

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

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

粘性功能：https://caniuse.com/#feat=css-sticky

Answer 2

更新：

已在Safari v12.0.2，Firefox v64.0和Chrome v71.0.3578.98上成功进行了测试

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

简单的解决方案是主体上只有overflow-x: hidden;，没有html元素。 Here is the amazing comment参与了有关使规格更清楚有关溢位和位置粘性的讨论，这有助于我弄清这一点。

因此，请确保将其从html元素中删除，以及要粘贴的元素的所有祖先元素。我在这里更深入地介绍了祖先问题：https://stackoverflow.com/a/54116585/6502003。

我已经在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>

Answer 3

仍然没有本机解决方案。

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

位置粘不与身体一起工作{overflow-x：hidden; }

3 个答案:

更新：