JSFiddle - React, Tailwind, and code Playground

by Dmitri Ganenco

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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);
}); */


$(document).on('scroll', function() {
  $(".logo-holder").toggleClass('nodisplay', $(this).scrollTop() > 10);
})