<div id="sticky-wrap">
  <h1>testing sticky header</h1>
</div>
<div class="wrap">
  <nav class="fixed-sidebar">
    <a href="#">Fixed links</a>
    <a href="#">Fixed links</a>
    <a href="#">Fixed links</a>
    <a href="#">Fixed links</a>
    <a href="#">Fixed links</a>
    <a href="#">Fixed links</a>
    <a href="#">Fixed links</a>

  </nav>
  <div class="content">
    <p>scroll1</p>
    <p>scroll2</p>
    <p>scroll3</p>
    <p>scroll4</p>
    <p>scroll5</p>
    <p>scroll6</p>
    <p>scroll7</p>
    <p>scroll8</p>
    <p>scroll9</p>
    <p>scroll0</p>
    <p>scroll1</p>
    <p>scroll2</p>
    <p>scroll3</p>
    <p>scroll4</p>
    <p>scroll5</p>
    <p>scroll6</p>
    <p>scroll7</p>
    <p>scroll8</p>
    <p>scroll9</p>
    <p>scroll</p>
    <p>scroll</p>
    <p>scroll</p>
    <p>scroll</p>
    <p>scroll</p>
    <p>scroll</p>
    <p>scroll</p>
    <p>scroll</p>
    <p>scroll</p>
    <p>scroll</p>
    <p>scroll</p>
    <p>scroll</p>
    <p>scroll</p>
    <p>scroll</p>
    <p>scroll</p>
    <p>scroll</p>
    <p>scroll</p>
    <p>scroll</p>
    <p>scroll</p>
    <p>scroll</p>
    <p>scroll</p>
    <p>scroll</p>
    <p>scroll</p>
    <p>scroll</p>
    <p>scroll</p>
    <p>scroll</p>
    <p>scroll</p>
    <p>scroll</p>
    <p>scroll</p>
    <p>scroll</p>
    <p>scroll</p>
    <p>scroll</p>
    <p>scroll</p>
    <p>scroll</p>
    <p>scroll</p>
    <p>scroll</p>
    <p>scroll</p>
    <p>scroll</p>
    <p>scroll</p>
    <p>scroll</p>
    <p>scroll</p>
    <p>scroll</p>
    <p>scroll</p>
    <p>scroll</p>
    <p>scroll</p>
    <p>scroll</p>
    <p>scroll</p>
    <p>scroll</p>
    <p>scroll</p>
    <p>scroll</p>
    <p>scroll</p>
    <p>scroll</p>
    <p>scroll</p>
    <p>scroll</p>
    <p>scroll</p>
    <p>scroll</p>
    <p>scroll</p>
    <p>scroll</p>
    <p>scroll</p>
    <p>scroll</p>
    <p>scroll</p>
    <p>scroll</p>
    <p>scroll</p>
    <p>scroll</p>
    <p>scroll</p>
    <p>scroll</p>
    <p>scroll</p>
    <p>scroll</p>
    <p>scroll</p>
    <p>scroll</p>
    <p>scroll</p>
    <p>scroll</p>
    <p>scroll</p>
    <p>scroll</p>
    <p>scroll</p>
    <p>scroll</p>
    <p>scroll</p>
    <p>scroll</p>
    <p>scroll</p>
    <p>scroll</p>
    <p>scroll</p>
    <p>scroll</p>
    <p>scroll</p>
    <p>scroll</p>
    <p>scroll</p>
    <p>scroll</p>
    <p>scroll</p>
    <p>scroll</p>
    <p>scroll</p>
    <p>scroll</p>
    <p>scroll</p>
    <p>scroll</p>
    <p>scroll</p>
    <p>scroll</p>
    <p>scroll</p>
    <p>scroll</p>
    <p>scroll</p>
    <p>scroll</p>
    <p>scroll</p>
    <p>scroll</p>
  </div>
</div>

html,
body {
  margin: 0;
  padding: 0;
}

html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}

/* sticky header */
#sticky-wrap {
  top: -115px;
  background: red;
  transition: 1s all ease;
}
#sticky-wrap.stickyhead {
  position: fixed;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  width: 100%;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  padding: 3px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
/* */
#sticky-wrap h1 {
  font-size: 2rem;
  text-align: center;
  margin: 0;
  padding: 1.5em 0;
}
#sticky-wrap.stickyhead h1 {
  padding: 1rem 0;
  font-size: 1rem;
  color: #fff;
}
.wrap {
  background: #f9f9f9;
  padding: 10px;
  display: flex;
  align-items: flex-start;
}
.content {
  padding: 10px;
}
.content p {
  margin-top: 0;
}
.fixed-sidebar {
  position: fixed;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  width: 300px;
  padding: 10px;
  overflow: auto;
  background: #eee;
  border: 1px solid #000;
  transition: 1s all ease;
}

.fixed-sidebar a {
  display: block;
  color: #000;
  padding: 5px 10px;
  text-decoration: none;
}

.stickyhead + .wrap .fixed-sidebar {
  top: 65px; /* magic number alert*/
}

//script to create sticky header
jQuery(function () {
  createSticky(jQuery("#sticky-wrap"));
});

function createSticky(sticky) {
  if (typeof sticky != "undefined") {
    var pos = sticky.offset().top + 150,
      win = jQuery(window);

    // scroll should really be throttled
    // See https://codepen.io/paulobrien/pen/OJWKvQO for a throttled version
    win.on("scroll", function () {
      if (win.scrollTop() > pos) {
        sticky.addClass("stickyhead");
      } 
      if (win.scrollTop() < pos -50)  {
        sticky.removeClass("stickyhead");
      }
    });
  }
}