Why is the sticky header getting stuck?-CodePudding

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  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" ><button >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" ><button >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" ><button >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>

CodePudding user response：

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  id="myHeader">
            <img src="Images/charmlogoTrans.png" width="100px" height="100px">
          </div>

CodePudding user response：

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  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" ><button >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" ><button >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" ><button >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>