JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header id="header-wrap">
  <div id="redline"></div>
  <div id="velkommen"></div>
  <div id="header">
    <!--This tag should get class="fix"-->
    <h1>#HEADER</h1>
  </div>
</header>
<div class="push">

</div>

CSS

#header-wrap {
  top: 0;
  width: 100%;
}

#redline {
  top: 0;
  left: 0;
  width: 100%;
  position: fixed;
  height: 10px;
  background-color: #b30027;
  z-index: 99;
}

#velkommen {
  height: 300px;
  width: 100%;
  background-color: white;
  position: relative;
  top: 10px;
  margin-bottom: -60px;
}

#header {
  position: relative;
  left: 0;
  width: 100%;
  background-color: white;
  height: 60px;
}

.fix #header {
  position: fixed;
  top: 10px;
}

h1 {
  margin: 0;
}

.push {
  height: 1000px;
}

JavaScript

jQuery(document).ready(function() {
  var wrap = $('#header-wrap');

  $(window).on('scroll', function(e) {

if ($(this).scrollTop() > 147) {
      wrap.addClass('fix');
    } else {
      wrap.removeClass('fix');
    }

  });
});