title: Anchors not working when header's position is fixed
body: <p>I've made a header that has fixed position when I scroll. But when that happens the anchor tag stops working and all the effects as well</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>.buttons {
      margin-left: 460px;
  }
  
  .buttons .button a i {
      color: #fff;
      transition: .2s;
  }
  
  .buttons .button {
      float: left;
      margin-left: 10px;
      margin-top: 0px;
      transition: .8s;
      background-image: url(img/hexagon0.png);
      width: 50px;
      height: 50px;
      cursor: pointer;
  }
  
  .buttons .button a i:hover {
      color: #ff8000;
  }
  
  .buttons .button a i {
      margin-top: 15px;
  }
  
  .top-container {
      background-color: #f1f1f1;
      padding: 30px;
      text-align: center;
  }
  
  .header {
      padding: 10px 16px;
      background: #555;
      color: #f1f1f1;
      z-index: -1;
  }
  
  .content {
      padding: 16px;
      z-index: 1;
  }
  
  .sticky {
      position: fixed;
      top: 0;
      width: 100%;
  }
  
  .sticky + .content {
      padding-top: 102px;
  }
  div.hexagons {
      padding-left: 100px;
      margin-top: 100px;
  }
  
  .hex i {
      color: #fff;
      margin-top: 45px;
      transition: .5s ease;
  }
  
  .hex {
      cursor: pointer;
      width: 200px;
  }
  
  #hex1 {
      margin-left: -300px;
  }
  
  #hex2 {
      margin-left: 108px;
      margin-top: -172px;
  }
  
  #hex3 {
      margin-top: 60px;
      margin-left: -99px;
  }
  
  #hex4 {
      margin-left: 310px;
      margin-top: -172px;
  }
  
  #hex5 {
      margin-left: -510px;
      margin-top: -175px;
  }
  
  .hex:hover i {
      transform: translateY(-70px);
  }
  
  .hex .text p {
      margin-top: -50px;
      opacity: 0;
      transition: .5s;
      transform: translateY(50px);
      color: #fff;
  }
  
  .hex .text p#title {
      font-size: 15px;
  }
  
  .hex:hover .text p#title {
      font-size: 18px;
  }
  
  .hex .text p#content {
      margin-top: 0;
      font-size: 15px;
  }
  
  .hex:hover .text p#content {
      font-size: 15px;
  }
  
  .hex:hover .text p {
      transform: translateY(0);
      opacity: 1;
  }
  
  .hexagon {
      position: relative;
      width: 200px;
      height: 115.47px;
      background-color: #2e2e2e;
      margin: 57.74px 0;
      box-shadow: 0 0 20px rgba(0,0,0,0.6);
  }
  
  .hexagon:before,
  .hexagon:after {
      content: "";
      position: absolute;
      z-index: 1;
      width: 141.42px;
      height: 141.42px;
      -webkit-transform: scaleY(0.5774) rotate(-45deg);
      -ms-transform: scaleY(0.5774) rotate(-45deg);
      transform: scaleY(0.5774) rotate(-45deg);
      background-color: inherit;
      left: 29.2893px;
      box-shadow: 0 0 20px rgba(0,0,0,0.6);
  }
  
  .hexagon:before {
      top: -70.7107px;
  }
  
  .hexagon:after {
      bottom: -70.7107px;
  }
  
  /*cover up extra shadows*/
  .hexagon span {
      display: block;
      position: absolute;
      top:0px;
      left: 0;
      width:200px;
      height:115.4701px;
      z-index: 2;
      background: inherit;
  }
  
  .hex-img1 {
      margin-left: -300px;
      margin-top: -50px;
      z-index: -1;
  }
  
  .hexagon-img {
      position: relative;
      width: 800px;
      height: 461.88px;
      margin: 230.94px 0;
      background-image: url(img/2.jpg);
      background-size: auto 912.2134px;
      background-position: center;
      border-left: solid 5px #ff8000;
      border-right: solid 5px #ff8000;
  }
  
  .hexTop,
  .hexBottom {
      position: absolute;
      z-index: 1;
      width: 565.69px;
      height: 565.69px;
      overflow: hidden;
      -webkit-transform: scaleY(0.5774) rotate(-45deg);
      -ms-transform: scaleY(0.5774) rotate(-45deg);
      transform: scaleY(0.5774) rotate(-45deg);
      background: inherit;
      left: 112.16px;
  }
  
  /*counter transform the bg image on the caps*/
  .hexTop:after,
  .hexBottom:after {
      content: "";
      position: absolute;
      width: 790.0000px;
      height: 456.1067126598044px;
      -webkit-transform:  rotate(45deg) scaleY(1.7321) translateY(-228.0534px);
      -ms-transform:      rotate(45deg) scaleY(1.7321) translateY(-228.0534px);
      transform:          rotate(45deg) scaleY(1.7321) translateY(-228.0534px);
      -webkit-transform-origin: 0 0;
      -ms-transform-origin: 0 0;
      transform-origin: 0 0;
      background: inherit;
  }
  
  .hexTop {
      top: -282.8427px;
      border-top: solid 7.0711px #ff8000;
      border-right: solid 7.0711px #ff8000;
  }
  
  .hexTop:after {
      background-position: center top;
  }
  
  .hexBottom {
      bottom: -282.8427px;
      border-bottom: solid 7.0711px #ff8000;
      border-left: solid 7.0711px #ff8000;
  }
  
  .hexBottom:after {
      background-position: center bottom;
  }
  
  .hexagon-img:after {
      content: "";
      position: absolute;
      top: 2.8868px;
      left: 0;
      width: 790.0000px;
      height: 456.1067px;
      z-index: 2;
      background: inherit;
  }
  
  .content {
      margin-top: 1000px;
  }
  
  .section-title {
      background-color: #ff8000;
      width: 300px;
      text-align: center;
      transform: rotateZ(30deg) translateY(-21px) translateX(200px);
  }
  
  .section-title p {
      font-size: 50px;
      color: #fff;
      z-index: 1;
      font-weight: bold;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en" dir="ltr"&gt;
        &lt;head&gt;
              &lt;meta charset="utf-8"&gt;
              &lt;title&gt;&lt;/title&gt;
              &lt;link rel="stylesheet" href="style.css"&gt;
              &lt;link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"&gt;
              &lt;script src="https://code.jquery.com/jquery-3.3.1.js"&gt;&lt;/script&gt;
  
        &lt;/head&gt;
        &lt;body&gt;
            &lt;center&gt;
                &lt;div class="hexagons"&gt;
                    &lt;a href="#one"&gt;&lt;div class="hex" id="hex1"&gt;
                        &lt;div class="hexagon"&gt;
                            &lt;span&gt;
                                &lt;i style="font-size: 30px;" class="fa fa-paint-brush" aria-hidden="true"&gt;&lt;/i&gt;
                                &lt;div class="text"&gt;
                                    &lt;p id="title"&gt;Grafisk Design&lt;/p&gt;
                                    &lt;p id="content"&gt;Jag har jobbat i många år med Grafisk Design&lt;/p&gt;
                                &lt;/div&gt;
                            &lt;/span&gt;
                        &lt;/div&gt;
                 &lt;/div&gt;
                 &lt;/a&gt;
  
                 &lt;a href="#two"&gt;&lt;div class="hex" id="hex2"&gt;
                     &lt;div class="hexagon"&gt;
                         &lt;span&gt;
                             &lt;i style="font-size: 30px;" class="fa fa-gamepad" aria-hidden="true"&gt;&lt;/i&gt;
                             &lt;div class="text"&gt;
                                 &lt;p id="title"&gt;Spel Skapande&lt;/p&gt;
                                 &lt;p id="content"&gt;Jag älskar att jobba med speldesign och skapande&lt;/p&gt;
                             &lt;/div&gt;
                          &lt;/span&gt;
                     &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;/a&gt;
  
                  &lt;a href="#three"&gt;&lt;div class="hex" id="hex3"&gt;
                      &lt;div class="hexagon"&gt;
                          &lt;span&gt;
                              &lt;i style="font-size: 30px;" class="fa fa-music" aria-hidden="true"&gt;&lt;/i&gt;
                              &lt;div class="text"&gt;
                                  &lt;p id="title"&gt;Musik Skapande&lt;/p&gt;
                                  &lt;p id="content"&gt;Jag brukar på min fritid &lt;br&gt; skapa musik&lt;/p&gt;
                              &lt;/div&gt;
                          &lt;/span&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;&lt;/a&gt;
  
                  &lt;a href="#four"&gt;&lt;div class="hex" id="hex4"&gt;
                      &lt;div class="hexagon"&gt;
                          &lt;span&gt;
                              &lt;i style="font-size: 30px;" class="fa fa-file-text-o" aria-hidden="true"&gt;&lt;/i&gt;
                              &lt;div class="text"&gt;
                                  &lt;p id="title"&gt;CV&lt;/p&gt;
                                  &lt;p id="content"&gt;Här kan du se mitt CV&lt;/p&gt;
                              &lt;/div&gt;
                          &lt;/span&gt;
                     &lt;/div&gt;
                &lt;/div&gt;&lt;/a&gt;
  
                &lt;a href="#four"&gt;
                    &lt;div class="hex" id="hex5"&gt;
                        &lt;div class="hexagon"&gt;
                            &lt;span&gt;
                                &lt;i style="font-size: 30px;" class="fa fa-video-camera" aria-hidden="true"&gt;&lt;/i&gt;
                                &lt;div class="text"&gt;
                                    &lt;p id="title"&gt;Videos&lt;/p&gt;
                                    &lt;p id="content"&gt;Här postar jag min videos&lt;/p&gt;
                                &lt;/div&gt;
                            &lt;/span&gt;
                          &lt;/div&gt;
                    &lt;/div&gt;&lt;/a&gt;
               &lt;/div&gt;
         &lt;/center&gt;
         &lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;
              &lt;div class="header" id="myHeader"&gt;
                    &lt;div class="buttons"&gt;
                          &lt;div class="button-hover"&gt;
                                &lt;div class="button"&gt;
                                      &lt;a href="youtube.com"&gt;&lt;i style="font-size: 17px;" class="fa fa-paint-brush" aria-hidden="true"&gt;&lt;/i&gt;&lt;/a&gt;
                                &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div class="button"&gt;
                                &lt;a href="#"&gt;&lt;i style="font-size: 17px;" class="fa fa-gamepad" aria-hidden="true"&gt;&lt;/i&gt;&lt;/a&gt;
                          &lt;/div&gt;
  
                          &lt;div class="button"&gt;
                                &lt;a href="#"&gt;&lt;i style="font-size: 17px;" class="fa fa-music" aria-hidden="true"&gt;&lt;/i&gt;&lt;/a&gt;
                          &lt;/div&gt;
  
                          &lt;div class="button"&gt;
                                &lt;a href="#"&gt;&lt;i style="font-size: 17px;" class="fa fa-file-text-o" aria-hidden="true"&gt;&lt;/i&gt;&lt;/a&gt;
                          &lt;/div&gt;
  
                          &lt;div class="button"&gt;
                                &lt;a href="#"&gt;&lt;i style="font-size: 17px;" class="fa fa-video-camera" aria-hidden="true"&gt;&lt;/i&gt;&lt;/a&gt;
                          &lt;/div&gt;
                    &lt;/div&gt;
              &lt;/div&gt;
  
        &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="content"&gt;
        &lt;div id="one"&gt;
              &lt;div class="section-title"&gt;
                    &lt;p&gt;section 1&lt;/p&gt;
              &lt;/div&gt;
              &lt;div class="hex-img1"&gt;
                    &lt;div class="hexagon-img"&gt;
                          &lt;div class="hexTop"&gt;&lt;/div&gt;
                          &lt;div class="hexBottom"&gt;&lt;/div&gt;
                    &lt;/div&gt;
              &lt;/div&gt;
        &lt;/div&gt;
  
        &lt;div id="two"&gt;
              &lt;p&gt;section 2&lt;/p&gt;
        &lt;/div&gt;
  
        &lt;div id="three"&gt;
              &lt;p&gt;section 3&lt;/p&gt;
        &lt;/div&gt;
  
        &lt;div id="four"&gt;
              &lt;p&gt;section 4&lt;/p&gt;
        &lt;/div&gt;
  
        &lt;div id="five"&gt;
              &lt;p&gt;section 5&lt;/p&gt;
        &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;script&gt;
  window.onscroll = function() {myFunction()};
  
  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");
   }
  }
  &lt;/script&gt;
  
  &lt;script type="text/javascript"&gt;
  $("a[href^='#']").click(function(e) {
        e.preventDefault();
  
        var position = $($(this).attr("href")).offset().top;
  
        $("body, html").animate({
              scrollTop: position
        } /* speed */ );
        });
  &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>So I need help to get this working on my site. </p>
  
  <p>I want the header to appear when I scroll as a second menu apart from the one at the top. So it is easy to access wherever you are on the page.</p>