title: Sticky header doesn't scroll all the way back up (overlaps div below)
body: <p>I have an issue with my sticky header: it behaves properly when I scroll down but when I scroll all the way back up it doesn't go back to its starting position, instead it seems to overlap the div below. I really don't understand where the problem comes from so any help would be greatly appreciated, thanks.</p>
  
  <p>Here's the code:</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-js lang-js prettyprint-override"><code>        
  // When the user scrolls the page, execute myFunction 
  window.onscroll = function() {myFunction()};
  
  // Get the header
  var header = document.getElementById("myHeader");
  
  // Get the offset position of the navbar
  var sticky = header.offsetTop;
  
  // Add the sticky class to the header when you reach its scroll position. Remove "sticky" when you leave the scroll position
  function myFunction() {
    if (window.pageYOffset &gt;= sticky)
    {
      header.classList.add("sticky");
    } else {
      header.classList.remove("sticky");
    }
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.header {
    padding: 10px 16px;
    background: #1919ff;
    color: #f1f1f1;
  }
  .sticky {
    position: fixed;
    top: 0;
    width: 100%;
  }
  
  #about {
    background-color: #ccccff;
    height: 400px;
    width: 67%;
    margin: auto;
    box-sizing: border-box;
  }
  
  .round-border{
     border-radius: 50%;
    }
  .portrait-image{
      width: 25%;    
    }
  .header-bar{
      height: 4px;
      width: 80%;
      background: #272C31;
      margin-left: 20%;
      margin-top: 3%;
  }
  
  #image-position {
    float: right;
    margin: 8% 6% 0 0;
  }
  #text {
    float: left;
    text-align: right;
    width: 57%;
    word-break: break-all;
    margin-top: 11%;
    margin-left: 7%;
  }
  
  p.medium {
      font-size:135%;
      line-height: 1.5;
  }
  
  .clearfix {
    overflow: auto;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" /&gt;
  &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"&gt;
  &lt;style type="text/css"&gt; .icon {background:none;} &lt;/style&gt;
  
  &lt;body style="background-color: #5D6D7E;"&gt;
    &lt;div class="header" id="myHeader"&gt;
      &lt;h2&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;xxxxxxxxx&lt;/h2&gt;
    &lt;/div&gt;
    &lt;div id="about" class="clearfix"&gt;
      &lt;div id="text"&gt;
        &lt;p class="medium"&gt;xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx&lt;br/&gt;xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx&lt;/p&gt;
        &lt;br/&gt;
        &lt;div class="header-bar"&gt;&lt;/div&gt;
        &lt;br/&gt;
        &lt;br/&gt;
        &lt;h4 style="font-size:150%;"&gt;xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx&lt;/h4&gt;
      &lt;/div&gt;
      &lt;img class="portrait-image round-border" id="image-position" src="http://abload.de/img/gpuxh.png" alt="portrait"&gt;
    &lt;/div&gt;
    
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>