JSFiddle - React, Tailwind, and code Playground

HTML

<body>
  text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>
  <div class="x--overlay" style="display: none">
    <div class="x--overlay__close"></div>
    контент
  </div>
</body>

CSS

.x--overlay {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 70px;
  padding: 10px;
  background: orange;
  text-align: center
}

.x--overlay__close {
    position: absolute;
    right: 0;
    width: 30px;
    height: 30px;
    transition: all .3s ease-out;
    z-index: 1;
    top: -20px;
    cursor: pointer;
}
.x--overlay__close::after, .x--overlay__close::before {
    content: '';
    position: absolute;
    top: 10px;
    width: 14px;
    height: 3px;
    z-index: 2;
    background-color: #8f9cb5;
}
.x--overlay__close::before {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    left: 8px;
}
.x--overlay__close::after {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    right: 8px;
}

JavaScript

(function() {
  
  document.addEventListener("scroll", checkIfNearPosition)
  
  // Закрываем блок по клику на крестик
	document.querySelector('.x--overlay__close').addEventListener('click', function(e) {
  	e.target.parentNode.style.display = 'none', document.removeEventListener("scroll", checkIfNearPosition)
  })
  
  function checkIfNearPosition(e) {
    var x = document.querySelector('.x--overlay');
  	window.pageYOffset > 100 && (x.style.display = 'block') || (x.style.display = 'none')
  }
  
})()