title: Sticky nav duplicating header background image and making it jump
body: <p>I am experiencing an issue when I start scrolling down and reach the point when the sticky nav becomes visible, it seems to create a duplicate of the background from header and makes header jump, but it is supposed to move to the next section. Is it CSS or JS related issue? </p>
  
  <p>Please see entire included code:</p>
  
  <p><a href="https://codepen.io/pipistrellonetopier/pen/yXLGjo" rel="nofollow noreferrer">https://codepen.io/pipistrellonetopier/pen/yXLGjo</a></p>
  
  <p>CSS code</p>
  
  <pre><code>.sticky {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      background-color: rgba(0, 0, 0, 0.65);
      z-index: 9999;
  }
  
  .sticky .main-nav { margin-top: 22px; }
  
  .sticky .main-nav li a:link,
  .sticky .main-nav li a:visited {
      padding: 14px 0;
      color: #f0f0f0;
      font-size: 100%;
  }
  
  .sticky .logo { 
      display: block;
      height: 29px;
      margin: 15px 0;
  }
  </code></pre>
  
  <p>Thank you   </p>
  
  <p>Peter</p>