JSFiddle - React, Tailwind, and code Playground

by phloe

HTML

<div class="topbar-container">
  <div class="topbar">
    <div class="topbar-trigger--up"></div>
    <div class="topbar-content">
      <p>Hello</p>
    </div>
    <div class="topbar-trigger--down"></div>
  </div>
</div>
<div class="content">
  
</div>

CSS

body {
  margin: 0;
}
.topbar-content {
  background-color: red;
  height: 50px;
  color: #FFF;
  font-weight: bold;
  padding: 10px;
}

.topbar--sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}
.topbar--hidden {
  transform: translateY(-70px);
}
.content {
  background: linear-gradient(0deg, pink, pink 50%, white 50%, white 100%);
  background-size: 50px 50px;
  height: 300vh;
}

JavaScript

const topbarContainer = document.querySelector(".topbar-container");
const topbar = document.querySelector(".topbar");
const topbarTriggerDown = document.querySelector(".topbar-trigger");

let scrollingDown = false;

const observerScroll = new IntersectionObserver((changeRecords) => {
	changeRecords.forEach((changeRecord) => {
  	const { target, isIntersecting } = changeRecord;
    if (!isIntersecting) {
    	topbar.classList.add("topbar--sticky");
    	topbar.classList.add("topbar--hidden");
    }
  });
});

observer.observe(topbarTrigger);


const observerHome = new IntersectionObserver((changeRecords) => {
	changeRecords.forEach((changeRecord) => {
  	const { target, isIntersecting } = changeRecord;
    if (!isIntersecting) {
    	topbar.classList.add("topbar--sticky");
    	topbar.classList.add("topbar--hidden");
    }
  });
});

observer.observe(topbarTrigger);

function scrollingDown() {
	
}