Menu
I am trying to use bootstrap's sticky header. But when I added body {overflow-x: hidden; } it stopped working.
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"
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>
939
This has been successfully tested on Safari v12.0.2, Firefox v64.0, and Chrome v71.0.3578.98
Added position: -webkit-sticky; for Safari.
The simple solution is to have only overflow-x: hidden; on the body and NOT the html element. Here is the amazing comment buried in the discussion on making the spec clearer regarding overflow and position sticky that helped me to figure this out.
So make sure to remove it from the html element and also any ancestor elements of the element you want to be sticky. I posted about the ancestor issue in more depth here: https://stackoverflow.com/a/54116585/6502003.
I have tested this on Firefox, Chrome, & Safari. Make sure to prefix for Safari as well.
I copied your snippet here with the adjustment that I mentioned and it works in both scenarios when you toggle on and off overflow-x: hidden; on the body.
$('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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
