位置粘性不适合身体{overflow-x：隐藏； } [英] Position sticky not working with body{ overflow-x: hidden; }
问题描述
我正在尝试使用引导程序的粘性标头。但是当我添加 body {overflow-x：hidden; } 停止工作。
I am trying to use bootstrap's sticky header. But when I added body {overflow-x: hidden; } it stopped working.
现在我在不同的页面上看到位置：粘性家长将溢出设置为其他内容，而可见没有出现，这是（或者曾经是）一个常见问题。但是所有职位都只有1岁。像这样的帖子： 为父项设置了溢出-x的位置粘性div
Now I seen on different pages that position: sticky with it's parent having overflow set to something else as visible not showing up, is (or was) a common problem. But all of the posts were like 1 year old. Like this post: "Position Sticky with overflow-x set for parent div"
现在有解决方案吗？自引导4开始使用它以来，我认为它现在受到更多的支持。
Is there a solution by now? Since bootstrap 4 started using it, I would think that it's more supported right now.
$('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>
推荐答案
据我所知，您现在无法使用它。
在某些浏览器中仍然仅部分支持。
As far as I know, you cannot use it by now. It is still only partially supported in some browsers.
如果您想知道此功能的作用，我建议您检查一下caniuse.com。
When you want to know how far it is with this feature, I can advise you to check it on caniuse.com.
粘性功能： https ：//caniuse.com/#feat=css-sticky
这篇关于位置粘性不适合身体{overflow-x：隐藏； }的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
