On scroll fixed header glitching-CodePudding

My website has an onscroll fixed header at the top, but whenever I try to scroll it glitches out. When you try to scroll, it cuts off the top part of the text and seems to lurch into place. I'm trying to make it looks seamless, like this demo

Here's the code for my website. If I've missed anything let me know.

body {
  margin: 0;
}

.top-container {
  background-image: url("https://picsum.photos/400/200");
  padding: 170px;
  text-align: center;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  position: relative;
  max-width: 100%;
}

.menuBar {
  background-color: rgb(168, 123, 81);
  padding: 30px 40px;
  text-align: left;
}

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

.sticky .content {
  padding-top: 102px;
}

.flex-container {
  display: flex;
  flex-wrap: wrap;
}

.flex1 {
  background-color: rgba(230, 199, 177, 255);
  width: 50%;
  margin: 10px;
  text-align: center;
  font-size: 15px;
  line-height: 25px;
}

.flex2 {
  background-image: url("https://picsum.photos/400/200");
  background-size: contain;
  background-repeat: no-repeat;
  width: 600px;
  margin: 10px;
  text-align: center;
  margin-top: 100px;
}

<div ></div>
<div  id="menuBar"> MenuBar</div>
<div >
  <div >
    <div >
      <h3> Welcome to Charm Thai Restaurant Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ultrices ligula quis nibh dignissim interdum. Proin consequat sem et lacus accumsan aliquam. Vestibulum sodales pretium ex at cursus. Maecenas efficitur
        finibus dictum. Duis nec quam ultrices, laoreet magna vel, auctor nunc. Sed ultricies lacus consequat velit lacinia, in consequat sapien pretium. Vestibulum sagittis ornare odio at elementum. Vestibulum sodales mauris ut tempor posuere. Nulla
        orci dolor, porta sed risus viverra, consectetur hendrerit sapien. Phasellus tristique ante augue, id efficitur nisi placerat nec. Nam rhoncus erat quis feugiat sollicitudin. Mauris id magna sit amet risus bibendum pretium. Donec in mauris mi.
        Morbi dignissim porttitor iaculis. Praesent mollis placerat velit, et blandit nibh venenatis nec. Fusce ut ultrices sem. Nunc eget lectus quis mauris dignissim tempor id placerat tellus. Nam vitae semper augue. Quisque rutrum laoreet urna eget
        posuere. Nulla cursus tincidunt elit et placerat. Duis sed pellentesque magna, non lacinia tortor. Nam nisl dui, rutrum et sollicitudin quis, condimentum quis augue. Aenean varius, nisi at luctus dapibus, diam magna dictum ex, ac sodales ex ex
        sit amet ligula. Donec pulvinar varius est. Nam vitae rutrum dolor. Donec lacinia, ex nec tempus venenatis, ligula justo dapibus diam, cursus semper augue mauris ac odio. Aliquam a arcu nec lacus rhoncus facilisis. Vestibulum sollicitudin lorem
        id metus auctor, sit amet ullamcorper mauris fringilla. In in erat eu eros volutpat bibendum sit amet fermentum enim. Vestibulum dictum orci sed tincidunt posuere. Donec viverra nunc ut sem viverra, et vestibulum mauris feugiat. Donec imperdiet
        quam dui, vitae vehicula ipsum hendrerit non. Phasellus nec augue eu erat posuere varius in quis odio. Nunc justo turpis, scelerisque non leo vel, laoreet ornare neque. Donec a neque ac nibh ultricies tristique id vel magna. Orci varius natoque
        penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque viverra ante in magna fringilla, vel sodales lectus feugiat. Donec sodales, odio eget dictum scelerisque, urna massa fringilla quam, nec pharetra erat dui at massa. Maecenas
        suscipit velit id scelerisque consectetur. Praesent ac egestas enim. Vestibulum nulla turpis, hendrerit nec sodales vitae, congue at felis. Cras auctor ac quam sed fermentum. Quisque libero est, aliquam ac lorem a, semper molestie mi. Cras suscipit
        eu erat eget hendrerit.
      </h3>
    </div>
    <div >2</div>
  </div>
</div>
<script>
  window.onscroll = function() {
    myFunction()
  };

  var header = document.getElementById("menuBar");
  var sticky = header.offsetTop;

  function myFunction() {
    if (window.pageYOffset > sticky) {
      header.classList.add("sticky");
    } else {
      header.classList.remove("sticky");
    }
  }
</script>

CodePudding user response：

Use the CSS built-in position: sticky

body {
  margin: 0;
}

.menuBar {
  position: sticky;
  top: 0;
  z-index: 1;
  background-color: rgb(168, 123, 81);
  padding: 30px 40px;
  text-align: left;
}

.top-container {
  background-image: url("https://picsum.photos/400/200");
  padding: 170px;
  text-align: center;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  position: relative;
  max-width: 100%;
}

.flex-container {
  display: flex;
  flex-wrap: wrap;
}

.flex1 {
  background-color: rgba(230, 199, 177, 255);
  width: 50%;
  margin: 10px;
  text-align: center;
  font-size: 15px;
  line-height: 25px;
}

.flex2 {
  background-image: url("https://picsum.photos/400/200");
  background-size: contain;
  background-repeat: no-repeat;
  width: 600px;
  margin: 10px;
  text-align: center;
  margin-top: 100px;
}

<div ></div>
<div  id="menuBar">MenuBar</div>
<div >
  <div >
    <div >
      <h3> Welcome to Charm Thai Restaurant Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ultrices ligula quis nibh dignissim interdum. Proin consequat sem et lacus accumsan aliquam. Vestibulum sodales pretium ex at cursus. Maecenas efficitur
        finibus dictum. Duis nec quam ultrices, laoreet magna vel, auctor nunc. Sed ultricies lacus consequat velit lacinia, in consequat sapien pretium. Vestibulum sagittis ornare odio at elementum. Vestibulum sodales mauris ut tempor posuere. Nulla
        orci dolor, porta sed risus viverra, consectetur hendrerit sapien. Phasellus tristique ante augue, id efficitur nisi placerat nec. Nam rhoncus erat quis feugiat sollicitudin. Mauris id magna sit amet risus bibendum pretium. Donec in mauris mi.
        Morbi dignissim porttitor iaculis. Praesent mollis placerat velit, et blandit nibh venenatis nec. Fusce ut ultrices sem. Nunc eget lectus quis mauris dignissim tempor id placerat tellus. Nam vitae semper augue. Quisque rutrum laoreet urna eget
        posuere. Nulla cursus tincidunt elit et placerat. Duis sed pellentesque magna, non lacinia tortor. Nam nisl dui, rutrum et sollicitudin quis, condimentum quis augue. Aenean varius, nisi at luctus dapibus, diam magna dictum ex, ac sodales ex ex
        sit amet ligula. Donec pulvinar varius est. Nam vitae rutrum dolor. Donec lacinia, ex nec tempus venenatis, ligula justo dapibus diam, cursus semper augue mauris ac odio. Aliquam a arcu nec lacus rhoncus facilisis. Vestibulum sollicitudin lorem
        id metus auctor, sit amet ullamcorper mauris fringilla. In in erat eu eros volutpat bibendum sit amet fermentum enim. Vestibulum dictum orci sed tincidunt posuere. Donec viverra nunc ut sem viverra, et vestibulum mauris feugiat. Donec imperdiet
        quam dui, vitae vehicula ipsum hendrerit non. Phasellus nec augue eu erat posuere varius in quis odio. Nunc justo turpis, scelerisque non leo vel, laoreet ornare neque. Donec a neque ac nibh ultricies tristique id vel magna. Orci varius natoque
        penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque viverra ante in magna fringilla, vel sodales lectus feugiat. Donec sodales, odio eget dictum scelerisque, urna massa fringilla quam, nec pharetra erat dui at massa. Maecenas
        suscipit velit id scelerisque consectetur. Praesent ac egestas enim. Vestibulum nulla turpis, hendrerit nec sodales vitae, congue at felis. Cras auctor ac quam sed fermentum. Quisque libero est, aliquam ac lorem a, semper molestie mi. Cras suscipit
        eu erat eget hendrerit.
      </h3>
    </div>
    <div >2</div>
  </div>
</div>