<div class="content">
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block fix"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
</div>

.block{height:auto;min-height:400px;border:2px solid red;margin:20px;}

.block--fixed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  margin: 0;
}

.fix{background:blue;}

body {
  margin: 0;
}

// https://github.com/imakewebthings/waypoints

const waypoint = new Waypoint({
  element: document.querySelector('.fix'),
  handler: function(direction) {
    this.element.classList.toggle('block--fixed');
  }
})