JSFiddle - React, Tailwind, and code Playground

by jwpg018241

HTML

<body style="height:4000px;">
  <div class="mobile_text">
    <h1>01. MENU</h1>
    <p>moving element<br>
      moving element<br>
      moving element<br></p>
    <h1>02. MENU</h1>
    <h2>moving element<br>
      moving element<br>
      moving element<br></h2>
    <h1>03. MENU</h1>
    <h3>moving element<br>
      moving element<br>
      moving element<br></h3>
    <h1>04. MENU</h1>
    <h1>05. MENU</h1>
  </div>
</body>

CSS

.hz {
  position: relative;
  
  /* .show() adds display:block which is the key to shifting other elements */
  /* display:block; */

  background-color: yellow;
  top: 0px;
  opacity: 1;
}

.mobile_text {
  position: fixed;
  display: block;
  left: 20px
}

p {
  position: relative;
  display: none;
  left: 20px;
  top: -80px;
  opacity: 1;
}
p {
  position: relative;
  display: none;
  left: 20px;
  top: -80px;
  opacity: 1;
}
p {
  position: relative;
  display: none;
  left: 20px;
  top: -80px;
  opacity: 1;
}
h1 {
  position: relative;

  display: block;

}

JavaScript

$(document).ready(function() {
  $(window).scroll(function() {
    if ($(document).scrollTop() > 200 && $(document).scrollTop() < 1000) {
      //$("p").addClass("hz", 1000, "easeInOutQuad");
      $("p").stop(true, false).addClass("hz").slideDown()

    } else {
      //$("p").removeClass("hz", 1000, "easeInOutQuad");
      $("p").stop(true, false).slideUp(function() { $(this).removeClass("hz") })
    }
  });
  
  $(window).scroll(function() {
    if ($(document).scrollTop() > 1000 && $(document).scrollTop() < 2000) {
      //$("p").addClass("hz", 1000, "easeInOutQuad");
      $("h2").stop(true, false).addClass("hz").slideDown()

    } else {
      //$("p").removeClass("hz", 1000, "easeInOutQuad");
      $("h2").stop(true, false).slideUp(function() { $(this).removeClass("hz") })
    }
  });
  
  $(window).scroll(function() {
    if ($(document).scrollTop() > 2000 && $(document).scrollTop() < 3000) {
      //$("p").addClass("hz", 1000, "easeInOutQuad");
      $("h3").stop(true, false).addClass("hz").slideDown()

    } else {
      //$("p").removeClass("hz", 1000, "easeInOutQuad");
      $("h3").stop(true, false).slideUp(function() { $(this).removeClass("hz") })
    }
  });  
  
  
  
});