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;
  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 target = $(".product-section").offset().top,
  timeout = null;
$('#sticky-atc-bar').hide();

$(window).scroll(function() {
  if (!timeout) {
    timeout = setTimeout(function() {
      console.log('scroll');
      clearTimeout(timeout);
      timeout = null;
      if ($(window).scrollTop() >= target) {
        $('#sticky-atc-bar').show();
      } else {
        $('#sticky-atc-bar').hide();
      }


    }, 250);
  }
});


// Old code, from other approaches
/*
$( document ).ready(function() {
	$('#sticky-atc-bar').hide();
	
	$(function() {
	    var scrollTop = $(window).scrollTop();
	    var targetTop = $(".product-section").offset().top;

	    if (scrollTop > targetTop) {
	     //   alert('Show message');
	     //   window.clearInterval(showMessageInterval);
    console.log('True:');
    
	    	$('#sticky-atc-bar').show();
	    } else {
      
      console.log('False:');
	    	$('#sticky-atc-bar').hide();
	    }
	}).trigger("change");
});
*/

/*
$( document ).ready(function() {
	$('#sticky-atc-bar').hide();

	var section = $(".product-section");
	var offsetSection = section.offset().top; //check for top property
	$(function() {
		$(window).scroll(function() {
        console.log('Scroll Event');

			if ($(window).scrollTop() >= offsetSection) { // reached product section
    console.log('True:');

				$('#sticky-atc-bar').show();
			} else { // not reached product section
      
          console.log('False');

				$('#sticky-atc-bar').hide();
			}
		});
	}).trigger("change");
});
*/