JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <title>Document</title>
  </head>

  <body>
  <section>Section 1</section>
  <section>Section 2</section>
  <section>Section 3</section>
  <section>Section 4</section>
    <div class="div-pub"></div>
  </body>

</html>

CSS

body {
  height: 2000px;
  margin: 0;
}

.div-pub {
  height: 150px;
  background-color: red;
  position: fixed;
  width: 100%;
}

section {
  height: 800px;
  background: green;
  margin: 20px 0;
}

JavaScript

const block = document.querySelector(".div-pub");
let startPosition = 0;
let direction;
window.addEventListener("scroll", () => {
  let endPosition = document.body.getBoundingClientRect().top;
  direction = endPosition > startPosition ? "DOWN" : "UP";
  startPosition = endPosition;

  if (direction === "UP") {
    block.style.bottom = "unset";
    block.style.top = "0px";
  } else if (direction === "DOWN") {
    block.style.top = "unset";
    block.style.bottom = "0px";
  }
});