JSFiddle - React, Tailwind, and code Playground

HTML

<div id="header-section">
</div>
<div id="sticky-atc-bar">
  <p>
    some content in the atc bar
  </p>
</div>
<div id="content-section">
<p>
some text in the content section
</p>
  <div class="product-section">
    <p>
      some content in the product section
    </p>
  </div>
</div>

CSS

#header-section {
  height: 50px;
  background-color: blue;
}

#sticky-atc-bar {
    height: 40px;
  background-color: red;
  position: fixed;
  display: none;
  z-index: 100;
  top: 0;
  left: 0;
  width: 100%;
  text-align: center;
  color: #fff;
}

#content-section {
    height: 800px;
  background-color: yellow;
}

.product-section {
  margin-top: 200px;
  height: 20px;
  background-color: green;
}

JavaScript

var productEl = document.querySelector('.product-section')
var stickyEl = document.querySelector('#sticky-atc-bar')

if (productEl && stickyEl) {
  var observer = new IntersectionObserver(handleSticky(stickyEl))
	observer.observe(productEl)
}


function handleSticky(element) {
	return function handler(entries) {
  	var isInViewPort = Boolean(entries.find(entry => entry.intersectionRatio > 0))
    var display = isInViewPort ? null : 'inherit'
    
    element.style.display = display
  }
}