JSFiddle - React, Tailwind, and code Playground

by jwpg018241

HTML

<body style="height:2500px;">
  <div class="mobile_text">
    <h1>01. MENU</h1>
    <div class="mm">
    <p>2022. 2. 22. — The proximity of an element to other elements that are referenced in a given selector has no impact on specificity. The following style ...

Cascade and inheritance - Learn web development | MDNhttps://developer.mozilla.org › ... › CSS building blocks
2022. 1. 31. — We'll explain specificity scoring and other such things later on. ... The effect of CSS location. Finally, it is also useful to note that ...
      </p>
    </div>
    <h1>02. MENU</h1>
    <p>moving element<br>
      moving element<br>
      moving element<br></p>
    <h1>03. MENU</h1>
    <p>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; */

  opacity: 1;
}

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

.mm {
  position: relative;
  display: none;
  left: 20px;
  opacity: 1;
  width:50%;
  height: 180px;
}

h1 {
  position: relative;

  display: block;

}

JavaScript

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

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