Position sticky not working with body{ overflow-x: hidden; }

UPDATE:

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>

Tags:

Css

Css Position

Recent Posts