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

Question

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

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

现在我在不同的页面上看到position: sticky,它的父母overflow设置了其他visible不显示的东西,是(或者是)常见的问题.但所有的帖子都像1岁.喜欢这篇文章:" 位置粘滞溢出-x为父div设置 "

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

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

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

Answer 1

Mic*_*ter 0

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

如果你想知道这个功能的进展如何，我建议你去 caniuse.com 上查看一下。

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

归档时间：	7 年，6 月前
查看次数：	1744 次
最近记录：	6 年，10 月前