JSFiddle - React, Tailwind, and code Playground

by Alicia Sykes

HTML

<body class="light">
<div class="outer">
  <nav class="top-bar">
    <img class="logo-image" src="https://newhomespain.com/wp-content/uploads/2016/11/new-home-spain-hi-res-logo.png">
    <a class="menu-link">Home</a> 
    <a class="menu-link">Webshop</a> 
    <a class="menu-link">About</a> 
    <a class="menu-link">Contact</a> 
  </nav>

    <div class="content">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Donec sed odio operae, eu vulputate felis rhoncus. Salutantibus vitae elit libero, a pharetra augue. Nihil hic munitissimus habendi senatus locus, nihil horum? A communi observantia non est recedendum.
    </p>
  </div>
  <div class="content">
    <p>
      Non equidem invideo, miror magis posuere velit aliquet. Quisque placerat facilisis egestas cillum dolore. Curabitur blandit tempus ardua ridiculus sed magna. Contra legem facit qui id facit quod lex prohibet. Petierunt uti sibi concilium totius Galliae in diem certam indicere.
    </p>
  </div>
  <div class="content">
    <p>
      A communi observantia non est recedendum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus. Nihilne te nocturnum praesidium Palati, nihil urbis vigiliae.
    </p>
  </div>
</div>

</body>

CSS

body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
}

body.light {
  --foreground: #000;
  --background: #fff;
}
body.dark {
  --foreground: #fff;
  --background: #000;
}

body.dark img.logo-image {
  filter: invert(1);
}

div.outer {
  width: 100%;
  min-height: 400vh;
}

nav.top-bar {
  top: 0;
  display: flex;
  width: 100%;
  background: var(--background);
  position: fixed;
  border-bottom: 1px solid var(--foreground);
}

img.logo-image {
  width: 6rem;
}

a.menu-link {
  margin: 0.5rem;
  padding: 0.25rem;
  color: var(--foreground);
  border: 1px solid var(--foreground);
}

div.content {
  height: 100vh;
  border-bottom: 1px dashed var(--foreground);
}

div.content p {
 padding-top: 4rem;
}

JavaScript

$(window).scroll(function(){
const pageHeight = $(window).height();
  if($(window).scrollTop() > pageHeight){
    $('body').addClass('dark').removeClass('light')
  }else{
  	$('body').addClass('light').removeClass('dark')
  }
});