JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="row hero-black">
<div class="logo light startLogo">
<div class="menu-logo"><img class="logo-image" src="https://newhomespain.com/wp-content/uploads/2016/11/footer-logo-white-small-compressed.png"></div> 
<div class="menu-link">Home</div> 
<div class="menu-link">Webshop</div> 
<div class="menu-link">About</div> 
<div class="menu-link">Contact</div> 
</div>
</div>

<div class="row white">
<div class="logo black altLogo">
<div class="menu-logo"><img class="logo-image" src="https://newhomespain.com/wp-content/uploads/2016/11/new-home-spain-hi-res-logo.png"></div> 
<div class="menu-link">Home</div> 
<div class="menu-link">Webshop</div> 
<div class="menu-link">About</div> 
<div class="menu-link">Contact</div> 
</div>
</div>

CSS

* {
  padding: 0;
  margin: 0;
}

.row {
  min-height: 100vh;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.logo {
  top: 30px;
  width: 100%;

  transform-origin: left top 0;
}

.startLogo {
  position: fixed;
}

.altLogo {
  position: absolute;
}

.white {
  color: white;
}

.black {
  color: #1d1d1d;
}

.grey {
  background: #ccc;
}

.white {
  background: white;
}

.hero-black {
    background: #000;
}

.light {
  color: white;
}

.menu-link, .menu-logo {
  width: 20%;
  float: left;
  text-align: center;
}

.logo-image {
  width: 80px;
  margin-top: -7px;
}

JavaScript

function logoSwitch () {
  $('.altLogo').each(function() {
    $(this).css('top',
      $('.startLogo').offset().top -  $(this).closest('.row').offset().top
    );
  });
};

$(document).scroll(function() {logoSwitch();});

logoSwitch();