JSFiddle - React, Tailwind, and code Playground

by jwpg018241

HTML

<body style="height:2500px;">
  <div class="mobile_text">
    <h1>01. MENU</h1>
    <p 01>moving element<br>
      moving element<br>
      moving element<br></p>
    <h1>02. MENU</h1>
    <p 02>moving element<br>
      moving element<br>
      moving element<br></p>
    <h1>03. MENU</h1>
    <p 03>moving element<br>
      moving element<br>
      moving element<br></p>
    <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;
}

h1 {
  position: relative;

  display: block;

}

JavaScript

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

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