JSFiddle - React, Tailwind, and code Playground

by Simon Hi

HTML

<div id="A">A Box</div>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<p>Ut velit mauris, egestas sed, gravida nec, ornare ut, mi. Aenean ut orci vel massa suscipit pulvinar. Nulla sollicitudin. Fusce varius, ligula non tempus aliquam, nunc turpis ullamcorper nibh, in tempus sapien eros vitae ligula. Pellentesque rhoncus nunc et augue. Integer id felis. Curabitur aliquet pellentesque diam. Integer quis metus vitae elit lobortis egestas. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi vel erat non mauris convallis vehicula. Nulla et sapien. Integer tortor tellus, aliquam faucibus, convallis id, congue eu, quam. Mauris ullamcorper felis vitae erat. Proin feugiat, augue non elementum posuere, metus purus iaculis lectus, et tristique ligula justo vitae magna.</p>
<div id="B">B Box</div>
<footer>Footer</footer>

CSS

#A {
  position: fixed;
  width: 80vw;
  height: 20vh;
  margin: 0 10vw;
  background: red;
  color: white;
  top: 0;
}

#B {
  margin: 1em 10vw;
  width: 80vw;
  height: 20vh;
  background: green;
  color: white;
}

p:first-of-type {
  margin-top: calc(20vh + 1em);
}

p {
  margin: 1em 10vw;
}

footer {
  margin: 1em 10vw;
  min-height: 200px;
}

JavaScript

function isVisible(e) {
  let WH = $(window).height(), // Viewport height
    WS = $(window).scrollTop(), // Scroll top
    EH = $(e).height(), // Element height
    EOT = $(e).offset().top; // Element offset top
  return (EOT < (WH + WS - EH));
}

$(window).scroll(function() {
  if (isVisible($('#B'))) {
    $('#A').css("display", "none");
  } else {
    $('#A').css("display", "block");
  }
});