when css position sticky stops sticking

After I add the height: auto; into body's CSS attributes as below, this auto-hiding problem is fixed. 

body {
    background: #fff;
    color: #444;
    font-family: "Open Sans", sans-serif;
    height: auto;
}

Hope it will be helpful to you. :)


This question: https://stackoverflow.com/a/45530506 answers the problem.

Once the "sticky div" reaches the edge of the screen, it is at the end of the viewport of the parent element. This causes the sticky element to stop and stay at the end of parent's viewport. This code pen provides an example: https://codepen.io/anon/pen/JOOBxg

#parent{
      width: 1000px;
      height: 1000px;
      background-color: red;
}
#child{
      width: 200px;
      height: 200px;
      background-color: blue;
      position: sticky;
      top: 0px;
      left: 0px;
}
body{  
      width: 3000px;
      height: 3000px;
}
<html>
  <div id="parent">
    <div id="child">
    </div>
  </div>
</html>

Tags:

Css

Sticky

Boundary

Recent Posts