title: Responsive position sticky
body: <p>I have sticky header disappearing when scrolling down on mobile devices and appearing again when scrolling up. But it is working just fine on other devices. Please help here is my HTML and CSS.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.top_header {
    padding-top: 15px;
    border-bottom: 1px solid #f4eade;
  }
  
  .header{
    overflow: hidden;
    width: 100%;
    padding-top: 5px;
    padding-bottom: 5px;
    z-index: 110;
    background-color: #fff;
    padding-left: 5%;
    padding-right: 5%;
    position: sticky;
    position: -webkit-sticky;
    position: -moz-sticky;
    position: -ms-sticky;
    position: -o-sticky; 
    position: -webkit-sticky;         
    top: 0px;
    box-shadow: 0px 2px 4.5px 0.5px rgba(0, 0, 0, 0.03);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container-fluid top_header"&gt;
  &lt;div class="row"&gt;
      &lt;!--  --&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="header navbar navbar-expand-lg"&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>