'Why is the sticky header getting stuck?

I've been working on a website for a bit and have come across a problem for the sticky header. When you scroll down it gets caught at the bottom of the hero image, and I have absolutely no clue why it's doing this Here is the issue in action (not promotion). All help appreciated, and sorry for a really long list of code.

window.onscroll = function() {myFunction()};

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

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

* {
    box-sizing: border-box;
  }

body, html{
    margin: 0;
    font-family: HebrewRegular;
    background-color: white;
    height: 100%;
}

@font-face {
    font-family: HebrewRegular;
    src: url("Adobe Hebrew Regular.otf") format("opentype");
    font-weight: bold;
}

.top-container{
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("Images/thai.png");
    height:100%;
    background-position-x: 50%;
    background-position-y: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}

.hero-text{
    text-align: center;
    position:absolute;
    top:40%;
    left:50%;
    transform: translate(-50%, -50%);
    color:black;
    font-size: 45px;
    background-color: rgb(168, 123, 81);
    padding:15px;
}

.content1 {
  display: flex;
  flex-wrap: wrap;
  background-color: rgb(253, 207, 255);
  justify-content:center;

}

.content1 > div {
  background-color: #f1f1f1;
  height:400px;
  width: 300px;
  margin: 20px;
  margin-top: 50px;
  text-align: center;
}

.content1 > div > h1{
  font-size: 35px;
}


.content1 > div > p{
  font-size: 15px;
}

.button5 {
  background-color: #555555;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}

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

.header {
  background: rgb(255, 255, 255);
  color: #f1f1f1;
  position: sticky;
  z-index: 1;
  text-align: center;
  
}

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

<div class="header" id="myHeader">
            <img src = "Images/charmlogoTrans.png" width = "100px" height = "100px">
          </div>

       <div class = "top-container">
           <h1 class = "hero-text">Placeholder</h1>
       </div>

       <div class = "content1">
            <div class = "about">
                <img src = "https://picsum.photos/300/200">
                <h1>About</h1>
                <p>Learn more about Charm Thai</p>
                <a href="about.html" class="button"><button class="button5">About</button></a>
            </div>
            <div class = "menu">
                <img src = "https://picsum.photos/300/200">
                <h1>Menu</h1>
                <p>Check out our menu</p>
                <a href="menu.html" class="button"><button class="button5">Menu</button></a>
            </div>
            <div class = "contact">
                <img src = "https://picsum.photos/300/200">
                <h1>Contact</h1>
                <p class = "contactDesc">Find out how to contact us</p>
                <a href="contact.html" class="button"><button class="button5">Contact</button></a>
            </div>  
       </div>
p
<br>
p
<br>
p
<br>
p
<br>
p
<br>
p
<br>
p
<br>
p
<br>
p
<br>
p
<br>
p
<br>

Solution 1:^[1]

I inspect your code and I think because you have two conflicting classes the .header class is position:sticky and the class .sticky is fixed, you can try to remove the position sticky on the header and just let the .sticky be fixed like below. Let me know if this will work.

header {
    background: rgb(255, 255, 255);
    color: #f1f1f1;
    position: fixed;
    z-index: 1;
    text-align: center;
    top: 0;
    right: 0;
    left: 0;
}

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

<div class="header sticky" id="myHeader">
            <img src="Images/charmlogoTrans.png" width="100px" height="100px">
          </div>

Solution 2:^[2]

You should use position fixed instead of sticky. Along with that you also need to set the width to 100%.

With these changes, you don't need to have Javascript to handle the header position

* {
    box-sizing: border-box;
  }

body, html{
    margin: 0;
    font-family: HebrewRegular;
    background-color: white;
    height: 100%;
}

@font-face {
    font-family: HebrewRegular;
    src: url("Adobe Hebrew Regular.otf") format("opentype");
    font-weight: bold;
}

.top-container{
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("Images/thai.png");
    height:100%;
    background-position-x: 50%;
    background-position-y: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}

.hero-text{
    text-align: center;
    position:absolute;
    top:40%;
    left:50%;
    transform: translate(-50%, -50%);
    color:black;
    font-size: 45px;
    background-color: rgb(168, 123, 81);
    padding:15px;
}

.content1 {
  display: flex;
  flex-wrap: wrap;
  background-color: rgb(253, 207, 255);
  justify-content:center;

}

.content1 > div {
  background-color: #f1f1f1;
  height:400px;
  width: 300px;
  margin: 20px;
  margin-top: 50px;
  text-align: center;
}

.content1 > div > h1{
  font-size: 35px;
}


.content1 > div > p{
  font-size: 15px;
}

.button5 {
  background-color: #555555;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}

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

.header {
  background: rgb(255, 255, 255);
  color: #f1f1f1;
  position: fixed; /* `sticky` to `fixed` */
  width: 100%; /* set the width 100% */
  z-index: 1;
  text-align: center;
  
}

<div class="header" id="myHeader">
            <img src = "Images/charmlogoTrans.png" width = "100px" height = "100px">
          </div>

       <div class = "top-container">
           <h1 class = "hero-text">Placeholder</h1>
       </div>

       <div class = "content1">
            <div class = "about">
                <img src = "https://picsum.photos/300/200">
                <h1>About</h1>
                <p>Learn more about Charm Thai</p>
                <a href="about.html" class="button"><button class="button5">About</button></a>
            </div>
            <div class = "menu">
                <img src = "https://picsum.photos/300/200">
                <h1>Menu</h1>
                <p>Check out our menu</p>
                <a href="menu.html" class="button"><button class="button5">Menu</button></a>
            </div>
            <div class = "contact">
                <img src = "https://picsum.photos/300/200">
                <h1>Contact</h1>
                <p class = "contactDesc">Find out how to contact us</p>
                <a href="contact.html" class="button"><button class="button5">Contact</button></a>
            </div>  
       </div>
p
<br>
p
<br>
p
<br>
p
<br>
p
<br>
p
<br>
p
<br>
p
<br>
p
<br>
p
<br>
p
<br>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1
Solution 2	Nick Vu

'Why is the sticky header getting stuck?

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]