JSFiddle - React, Tailwind, and code Playground

by Dmitri Ganenco

HTML

<div class="logo-holder nodisplay">something here</div>

<div class="container">
  More stuff
</div>
<div class="container">
  More stuff
</div>
<div class="container">
  More stuff
</div>
<div class="container">
  More stuff
</div>
<div class="container">
  More stuff
</div>


<div class="scroll-nav-holder">
  somethin more here
</div>

CSS

.logo-holder {
  height: 100px;
  background: red;
}

.nodisplay {
  display: none;
}

.scroll-nav-holder {
  height: 20px;
  background: blue;
}

.container {
  height: 200px;
  background: green;
}

.scroll-to-fixed-fixed {
  position: fixed;
  top: 0px;
}

JavaScript

$(window).scroll(function() {
  var scroll = $(window).scrollTop(); // ?
	const toggleCondition = $(this).scrollTop() > 10;
	$(".scroll-nav-holder").toggleClass('scroll-to-fixed-fixed', toggleCondition);
	$(".logo-holder").toggleClass('nodisplay', toggleCondition);
});