JSFiddle - React, Tailwind, and code Playground

HTML

<div id="uvodni"><img src="https://pixabay.com/static/uploads/photo/2015/09/02/12/27/matterhorn-918442_960_720.jpg" alt="matterhorn"></div>
<header class="large">
  <div class="container">
    <nav>
      <ul>
        <li><a href="#">HOME</a></li>
        <li><a href="#">ABOUT US</a></li>
        <li><a href="#">CONTACT</a></li>
      </ul>
    </nav>
  </div>
</header>
<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eget est vel odio placerat ultrices a eu magna. Suspendisse lobortis vestibulum sapien, at hendrerit enim vehicula at. Aliquam pretium sed neque vitae facilisis. Vivamus convallis, leo ut scelerisque
  ornare, ante sapien iaculis nunc, vitae pellentesque elit massa quis leo. Quisque non dignissim neque. Quisque elementum ultricies sodales. Aenean hendrerit, ex id vulputate dapibus, lorem lacus sagittis purus, at viverra magna neque eget enim. Proin
  tristique sodales diam, quis mollis tortor sodales a. Donec mauris orci, eleifend vitae risus non, dapibus dictum mi. Vestibulum eu aliquam quam, id scelerisque justo. Ut erat lectus, cursus ac feugiat at, maximus at augue. Curabitur tristique congue
  mauris at ultrices. Morbi sollicitudin vehicula sagittis. Morbi at finibus libero, eget ornare ligula. Suspendisse commodo, dui vel imperdiet semper, quam diam pulvinar ipsum, id euismod sem velit sit amet quam. Suspendisse turpis dui, egestas ut felis
  non, iaculis tincidunt erat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla aliquam augue a lacus dapibus venenatis. Fusce cursus, lorem non luctus vestibulum, nulla enim maximus est, lobortis rhoncus eros massa ut sapien. Pellentesque
  cursus ac dolor vitae condimentum. Nam gravida, ligula ac tristique aliquam, eros nisi elementum velit, eu fermentum eros libero ut nisl. Sed sed turpis congue, lobortis tortor ac, maximus sem. Vivamus imperdiet consectetur velit et lobortis. Fusce
  vehicula diam vitae elit cursus, nec volutpat sapien pellentesque. Donec viverra...

CSS

body{
 margin:0;
}
p{
  font-size:2em;
  background:#fff;
  color:#000;
  padding: 1em;
  margin-top:60%;
}
#uvodni img{
    position:fixed;
    top:0;
    z-index:-2;
    min-width:100vw;
    min-height:100vh;
    height:auto;width:auto;
    visibility:visible;
    margin:0;
}
.container {
  width: 90%;
  min-width: 740px;
  margin: 0 auto;
}
ul {
  float: right;
}

li {
  display: inline;
  float: left;
}

nav {
  width: 100%;
  margin: 0 auto;
}

header {
  float: left;
  width: 100%;
  position: fixed;
  top:0;
  z-index: 10;
}

header li {
  margin-right: 30px;
  margin-top: 0.5em;
}


/* header large */

header.large {
  height: 60px;
}

header.large a {
  color: white;
}


/* header small */

header.small {
  background: #fff;
  border-bottom: 1px solid #D3D3D3;
  height: 60px;
}

header.small a {
  color: #000;
}


/* Transitions */

a {
  transition: .7s all;
  -moz-transition: .7s all;
  -webkit-transition: .7s all;
  -o-transition: .7s all;
}

JavaScript

$(document).on("scroll", function() {
  if ($(document).scrollTop() > 350) {
    $("header").removeClass("large").addClass("small");
  } else {
    $("header").removeClass("small").addClass("large");
  }
});