title: Sticky header disappearing after going a certain ways down the page
body: <p>I am building a website for my upcoming wedding and I want a sticky header, but for some reason, it "disappears" by moving up after you go a certain way down the page. My test url is this: <a href="https://betterradiotech.com" rel="nofollow noreferrer">https://betterradiotech.com</a>. Here is the nav markup:<br></p>
  
  <pre><code>&lt;!-- Start Nav --&gt;
  &lt;header&gt;
      &lt;nav&gt;
          &lt;ul class="nav-list"&gt;
              &lt;li&gt;&lt;a href="/" title="Home"&gt;Home&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="/music/" title="Music"&gt;Music&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="/gallery/" title="Gallery"&gt;Gallery&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="/feed/" title="Feed"&gt;Feed&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/nav&gt;
  &lt;/header&gt; &lt;!--/ End Nav --&gt;
  </code></pre>
  
  <p>Here is the nav SCSS:<br></p>
  
  <pre><code>header {
      padding: 1em;
      position: sticky;
      top: 0;
      z-index: 100;
      width: 100%;
      background-color: $burgandy;
  }
  .nav-list {
      display: flex;
      flex-flow: row nowrap;
      li {
          list-style-type: none;
          margin-left: 10px;
      }
      a {
          color: $pink;
          font-weight: 600;
      }
  }
  .active-nav {color: $navy !important;}
  </code></pre>
  
  <p>There is no JavaScript in making the nav, except for making the active nav work...for completeness sake, I will include that as well:<br></p>
  
  <pre><code>switch(location.pathname) {
      case "/":
          document.querySelector("a[title*='Home']").classList.add("active-nav");
      break;
      case "/admin/":
          document.querySelector("a[title*='Admin']").classList.add("active-nav");
      break;
      case "/feed/":
          document.querySelector("a[title*='Feed']").classList.add("active-nav");
      break;
      case "/gallery/":
          document.querySelector("a[title*='Gallery']").classList.add("active-nav");
      break;
      case "/music/":
          document.querySelector("a[title*='Music']").classList.add("active-nav");
      break;
  }
  </code></pre>
  
  <p>Why is my nav bar disappearing after a certain distance down the page? It seems to happen right before the end of the full background picture in the first section.</p>