我正在尝试使用Bootstrap的粘性标题。 但是,当我添加了
现在我看到不同页面上说
现在有解决方案吗? 自从Bootstrap 4开始使用它以来,我认为它现在更受支持。
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>
$('body, html').css('overflow-x', 'hidden');
进行更改,但是没有生效。 - doğukan