JSFiddle - React, Tailwind, and code Playground

by Martin Emanuelsson

HTML

<div class="content1">
  <h1>content1</h1></div>
<div class="content2">
  <h1>content2</h1></div>
<div class="content3">
  <h1>content3</h1></div>
<div class="content4">
  <h1><a href="#">Scroll upp again ^</a></h1></div>

<div class="text">
  <p>Start scrolling to se the effect</p>
</div>
<div class="link"><a href="#">Scroll upp again ^</a></div>

CSS

body {
  /* Only for demo */
  height: 3200px;
  margin: 0;
  padding: 0;
}

.content1 {
  z-index: 10;
  display: block;
  width: 100%;
  height: 400px;
  background-color: red;
  position: fixed;
}

.content2 {
  z-index: 9;
  display: block;
  width: 100%;
  height: 400px;
  background-color: green;
  position: fixed;
}

.content3 {
  z-index: 8;
  margin: 0 auto;
  display: block;
  width: 100%;
  height: 400px;
  background-color: blue;
  position: fixed;
}

.content4 {
  z-index: 7;
  margin: 0 auto;
  display: block;
  width: 100%;
  height: 400px;
  background-color: white;
  position: fixed;
}

.scrollup {
  top: 0px !important;
  -webkit-transition: all .4s ease-in-out;
  -moz-transition: all .4s ease-in-out;
  -o-transition: all .4s ease-in-out;
  transition: all .4s ease-in-out
}

.scrolldown {
  top: -400px !important;
  -webkit-transition: all .4s ease-in-out;
  -moz-transition: all .4s ease-in-out;
  -o-transition: all .4s ease-in-out;
  transition: all .4s ease-in-out
}

.text {
  padding-top: 390px;
  position: fixed;
}

.link {
  padding-top: 430px;
  position: fixed;
  display: none;
}

JavaScript

/* fadeOut blocks */



$(window).scroll(function() {
  if ($(this).scrollTop() > 1600) {
    $(".content1").removeClass('scrollup').addClass('scrolldown');
  } else {
  $(".content1").add-('scrollup').addClass('scrolldown');
  }
});