JSFiddle - React, Tailwind, and code Playground

by Qwerty_Wasd

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<header>                                     
<h1 align="center">Виды анимации в 3D</h1> 
</header>
<div class="content">контент для скролла контент для скролла контент для скролла контент для скролла контент для скролла контент для скролла контент для скролла контент для скролла контент для скролла контент для скролла контент для скролла контент для скролла контент для скролла контент для скролла контент для скролла контент для скролла контент для скролла контент для скролла контент для скролла контент для скролла контент для скролла контент для скролла контент для скролла контент для скролла контент для скролла контент для скролла контент для скролла контент для скролла контент для скролла контент для скролла контент для скролла контент для скролла контент для скролла контент для скролла контент для скролла контент для скролла контент для скролла контент для скролла контент для скролла контент для скролла контент для скролла контент для скролла контент для скролла контент для скролла контент для скролла контент для скролла контент для скролла контент для скролла контент для скролла контент для скролла контент для скролла контент для скролла контент для скролла контент для скролла контент для скролла контент для скролла контент для скролла контент для скролла контент для скролла контент для скролла контент для скролла контент для скролла контент для скролла контент для скролла контент для скролла контент для скролла контент для скролла контент для скролла контент для скролла контент для скролла контент для скролла контент для скролла контент для скролла контент для скролла контент для скролла контент для скролла контент для скролла контент для скролла контент для скролла контент для скролла контент для скролла контент для скролла контент для скролла контент для скролла контент для скролла контент для скролла контент для скролла контент для скролла контент для скролла...

CSS

body {
  margin: 0;
  padding: 0;
}
header{
  text-align: center;
  font-size: 3em;
  line-height: 130px;
  height: 3em;
  background: #30b252;
  color: #fff;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
}
header h1 {
  margin: 0;
}

.glide {
  position: fixed;
  font-size: 1.5em;
  height: 3em;
  line-height: 3em;
  width: 100%;
  background: #e5ffed;
  color: #000;
  text-align: left;
  padding-left: 2em;
  border-bottom: 1px solid #30b252;
}

JavaScript

$(window).scroll(function() {
  if ($(this).scrollTop() > 1){
    $('header').addClass("glide");
  }
  else{
    $('header').removeClass("glide");
  }
});