title: Scrolling fixed header not showing on mobile device
body: <p>I have a fixed header that changes to a sticky header on scroll using JS. </p>
  
  <p>The dropdown menu works when in mobile view showing on Google Dev Tools and Firefox Responsive Design Mode, however it doesnt work on actual mobile devices. </p>
  
  <p>I've tried changing the Z-index and webkit-backface-visibility.</p>
  
  <p>The HTML:</p>
  
  <pre><code> &lt;header id="myHeader" class="site-header" role="banner"&gt;
      &lt;div class="nav-container"&gt;
          &lt;nav id="top-bar"&gt;
              &lt;div class="row" id="top-bar"&gt;
                  &lt;div class="top-bar-text"&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/nav&gt;
          &lt;nav id="site-navigation" class="main-navigation" role="navigation"&gt;
              &lt;div class="container nav-bar"&gt;
                      &lt;div class="row"&gt;
                          &lt;div class="module left site-title-container"&gt;
                              &lt;?php shapely_get_header_logo(); ?&gt;
                          &lt;/div&gt;
                          &lt;div class="module widget-handle mobile-toggle right visible-sm visible-xs"&gt;
                              &lt;i class="fa fa-bars"&gt;&lt;/i&gt;
                          &lt;/div&gt;
                          &lt;div class="module-group right"&gt;
                              &lt;div class="module left"&gt;
                                  &lt;?php shapely_header_menu(); // main navigation ?&gt;
                              &lt;/div&gt;
                              &lt;!--end of menu module--&gt;
                          &lt;/div&gt;
                          &lt;!--end of module group--&gt;
                      &lt;/div&gt;
              &lt;/div&gt;
          &lt;/nav&gt;&lt;!-- #site-navigation --&gt;
      &lt;/div&gt;
  &lt;/header&gt;
  
  header {
  height: 85px;
  left: 1em;
  position: fixed;
  z-index: 10000;
  right: 1em;
  top: 40px;
  }    
  </code></pre>
  
  <p>JS changes the header on scroll to:</p>
  
  <pre><code>.sticky {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: #f8b836;
  z-index: 999;
  height: 90px;
  overflow: hidden;
  -webkit-transition: height 0.3s;
  -moz-transition: height 0.3s;
  transition: height 0.3s;
  }
  </code></pre>
  
  <p>The CSS for the menu in mobile view:</p>
  
  <pre><code>@media (min-width:300px) and (max-width:480px){
  #site-navigation .module.left {
      padding-left: 0px;
      position: fixed;
      left: 0;
  }
  }
  </code></pre>
  
  <p>The JS: 
      window.onscroll = function() {myFunction()};</p>
  
  <pre><code>var header = document.getElementById("myHeader");
  var sticky = header.offsetTop;
  
  function myFunction() {
   if (window.pageYOffset &gt; sticky) {
  header.classList.add("sticky");
   } else {
   header.classList.remove("sticky");
  }
  }
  </code></pre>
  
  <p>I'd like the dropdown menu to actually show when the page has been scrolled and the sticky heading is showing.</p>