JSFiddle - React, Tailwind, and code Playground

by moob

HTML

<body>
  <main>
  <section class="section1">
    Problem: when slowly scrolling up and down, sometimes the sticky banner glitches because of padding/ h1 font size change.d
  </section>
  <div class="job-banner">
    <div class="inner-wrapper">
      <h1>Loremipsum dolor sit amet, consectetur a</h1>
      <p>Quisque sed nulla eget sapien porta</p>
    </div>  
  </div>
      <section class="section2">
  </section>
    </main>
</body>

CSS

body {
  background-color: #ffffff;
  font-family: "OpenSans-Regular", sans-serif;
  line-height: 24px;
  font-size: 17px;
  padding: 0px;
  margin: 0;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
}

main{
    max-width: 1440px;
  margin: 0 auto;
}
.job-banner {
  position:sticky;
  top:-1px;
  z-index:900;
  background: #f5f5f5;
   transition: all 0.3s ease-in-out;
   font-size: 1.2rem; 
}

.job-banner .inner-wrapper{
  padding: 30px 30px 30px 100px;
}

.job-banner.sticky .inner-wrapper{
  padding: 30px;
  background:blue;
}

.job-banner.sticky h1{
  font-size:1rem;
  margin:0
}

.section1{
  height: 180px;
  background-color: #C9F3F3;
  margin-bottom: 30px;
  padding:30px;
  text-align:center
}

.section2{
  margin-top: 30px;
  height: 2200px;
  background-color: #C9F3F3;
}

JavaScript

const el = document.querySelector(".job-banner");
const observer = new IntersectionObserver( 
  ([e]) => e.target.classList.toggle("sticky", e.intersectionRect.top < 1),
  {threshold: [1] }
);

observer.observe(el);