Tuesday

Why isn't my sticky header changing background color and text?

7:19 AM css, html, javascript No comments

Issue

I have a problem in my header. Its purpose is to stay on the page when you scroll. So with a fixed position and being sticky. During scrolling, its background changes color as well as the text. However, it doesn't work. It's sticky and fixed, but nothing else appears. So the background and color don't change. Here's the HTML, CSS and JS.

window.addEventListener("scroll", function () {
    var header = document.querySelector("header");
    header.classList.toggle("sticky", window.scrollY > 0);
  });

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap");

html, body{
    height: 100vh;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    scroll-behavior: smooth;
}

body{
    width: 100vw;
    height: 100vh;
    margin: 0;
    background: #222;
}

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: 0.6s;
  padding: 40px 5px;
  z-index: 1000;
}

header.sticky {
  padding: 40px 100px;
  background-color: black;
}

header .logo {
  margin-left: 60px;
  position: relative;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  font-size: 2em;
  text-transform: uppercase;
  letter-spacing: 2px;
  transition: 0.6s;
}

header ul {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

header ul li {
  margin-right: 50px;
  position: relative;
  list-style: none;
}

header ul li a {
  position: relative;
  margin: 0 15px;
  text-decoration: none;
  color: #fff;
  letter-spacing: 2px;
  font-weight: 500;
  transition: 0.6s;
}

li a:hover {
  color: cyan;
}

.section1, .section2, .section3, .section4, .section5, .section6, .section7{
    width: 100%;
    min-height: 100vh;
    position: relative;
}

.section1::before{
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    background: url(moonlight.jpg) top center fixed;
    background-size: cover;
}

.section2 {
  background: #141414;
  color: white;
}

.section3 {
  background: white;
}

.section4 {
  background: white;
}

.section5 {
  background: white;
}

.section6 {
  background: white;
}

.section7 {
  background: white;
}

.About{
    font-size: 50px;
    text-align: center;
    font-family: 'Franklin Gothic Heavy';
}

.section1 .parallax-hangman {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: fixed;
  font-family: 'Franklin Gothic Heavy';
  font-size: 15vw;
  color: white;
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3), 5px 5px 70px rgba(255, 255, 255, 0.5), 0 0 10px rgba(255, 255, 255, 0.8);
}


#image-track {
    display: flex;
    gap: 4vmin;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(0%, -50%); 
    user-select: none;
  }
  
#image-track > .image {
    width: 40vmin;
    height: 56vmin;
    object-fit: cover;
    object-position: 100% center;
}

#image-track .image {
    transition: transform 0.3s ease;
}

#image-track .image.full-size {
    max-width: 100%;
    object-fit: contain;
    transform: scale(1.5);
}

@media (width <= 1499px){
    .html{
    flex-direction: column;
    }
}

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="styles.css"/>
    <title>Hangman</title>
</head>
<body>
<header id = "top">
    <a href="#section1" class="logo">Logo</a>
    <ul>
      <li><a href="#section2">Sommaire</a></li>
      <li><a href="#section3">Go</a></li>
      <li><a href="#section4">Git</a></li>
      <li><a href="#section5">Gitea</a></li>
      <li><a href="#section6">Règles</a></li>
      <li><a href="#section7">Jeu</a></li>
    </ul>  
  </header>
    <div class="section1" id = "section1">
        <div class="parallax-hangman">HANGMAN</div>
    </div>

    <div class="section2" id="section2">
        <div class="About">Sommaire</div>
    </div>

    <div class="section3" id="section3">
        <div class="About">Go, c'est quoi ?</div>
    </div>

    <div class="section4" id="section4">
        <div class="About">Git, c'est quoi ?</div>
    </div>

    <div class="section5" id="section5">
        <div class="About">Gitea, c'est quoi ?</div>
    </div>

    <div class="section6" id = "section6">
        <div id="image-track" data-mouse-down-at="0" data-prev-percentage = "0">
            <img class="image" src="installation.png" draggable="false"/>
            <img class="image" src="https://github-production-user-asset-6210df.s3.amazonaws.com/153553034/289691894-ecf6bf92-9fd6-427e-8c83-3ddce18eefa2.jpg?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAVCODYLSA53PQK4ZA%2F20240113%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240113T121811Z&X-Amz-Expires=300&X-Amz-Signature=8f3debc38bb1c093582577e66f2ebf0def75f46aa82cdb1297a3f7cf271a2761&X-Amz-SignedHeaders=host&actor_id=0&key_id=0&repo_id=730370407" draggable="false"/>
            <img class="image" src="Settings.PNG" draggable="false"/>
            <img class="image" src="https://github-production-user-asset-6210df.s3.amazonaws.com/153553034/289691782-8643510e-6288-4151-8e0b-018a3d276265.jpg?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAVCODYLSA53PQK4ZA%2F20240113%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240113T121912Z&X-Amz-Expires=300&X-Amz-Signature=a0b8072d79ad6369fe85ce11894b886faf3727fa371dc4d14f0e052ab28d8774&X-Amz-SignedHeaders=host&actor_id=0&key_id=0&repo_id=730370407" draggable="false"/>
        </div>   
    </div>    
    <div class="section7" id = "section7"> Jeu </div>
    <script src="javaScript.js"></script>
</body> 
</html>

Solution

pls add 'true' at your eventListener and also remove from your css in your html and body the height:100% and it will work

window.addEventListener("scroll", ()=>{
    let position = window.scrollY
    console.log(position)
    const header = document.getElementById("top");
      header.classList.toggle('sticky', window.scrollY>0)
  },true);

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap");

html, body{
    /* height: 100vh; */
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    scroll-behavior: smooth;
}

body{
    width: 100vw;
    /* height: 100vh; */
    margin: 0;
    background: #222;
}

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: 0.6s;
  padding: 40px 5px;
  z-index: 1000;
}

header.sticky {
  padding: 40px 100px;
  background-color: black;
}

header .logo {
  margin-left: 60px;
  position: relative;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  font-size: 2em;
  text-transform: uppercase;
  letter-spacing: 2px;
  transition: 0.6s;
}

header ul {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

header ul li {
  margin-right: 50px;
  position: relative;
  list-style: none;
}

header ul li a {
  position: relative;
  margin: 0 15px;
  text-decoration: none;
  color: #fff;
  letter-spacing: 2px;
  font-weight: 500;
  transition: 0.6s;
}

li a:hover {
  color: cyan;
}

.section1, .section2, .section3, .section4, .section5, .section6, .section7{
    width: 100%;
    min-height: 100vh;
    position: relative;
}

.section1::before{
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    background: url(moonlight.jpg) top center fixed;
    background-size: cover;
}

.section2 {
  background: #141414;
  color: white;
}

.section3 {
  background: white;
}

.section4 {
  background: white;
}

.section5 {
  background: white;
}

.section6 {
  background: white;
}

.section7 {
  background: white;
}

.About{
    font-size: 50px;
    text-align: center;
    font-family: 'Franklin Gothic Heavy';
}

.section1 .parallax-hangman {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: fixed;
  font-family: 'Franklin Gothic Heavy';
  font-size: 15vw;
  color: white;
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3), 5px 5px 70px rgba(255, 255, 255, 0.5), 0 0 10px rgba(255, 255, 255, 0.8);
}


#image-track {
    display: flex;
    gap: 4vmin;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(0%, -50%); 
    user-select: none;
  }
  
#image-track > .image {
    width: 40vmin;
    height: 56vmin;
    object-fit: cover;
    object-position: 100% center;
}

#image-track .image {
    transition: transform 0.3s ease;
}

#image-track .image.full-size {
    max-width: 100%;
    object-fit: contain;
    transform: scale(1.5);
}

@media (width <= 1499px){
    .html{
    flex-direction: column;
    }
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="style.css"/>
    <script src="script.js" defer></script>
    <title>Hangman</title>
</head>
<body>
<header id = "top">
    <a href="#section1" class="logo">Logo</a>
    <ul>
      <li><a href="#section2">Sommaire</a></li>
      <li><a href="#section3">Go</a></li>
      <li><a href="#section4">Git</a></li>
      <li><a href="#section5">Gitea</a></li>
      <li><a href="#section6">Règles</a></li>
      <li><a href="#section7">Jeu</a></li>
    </ul>  
  </header>
    <div class="section1" id = "section1">
        <div class="parallax-hangman">HANGMAN</div>
    </div>

    <div class="section2" id="section2">
        <div class="About">Sommaire</div>
    </div>

    <div class="section3" id="section3">
        <div class="About">Go, c'est quoi ?</div>
    </div>

    <div class="section4" id="section4">
        <div class="About">Git, c'est quoi ?</div>
    </div>

    <div class="section5" id="section5">
        <div class="About">Gitea, c'est quoi ?</div>
    </div>

    <div class="section6" id = "section6">
        <div id="image-track" data-mouse-down-at="0" data-prev-percentage = "0">
            <img class="image" src="installation.png" draggable="false"/>
            <img class="image" src="https://github-production-user-asset-6210df.s3.amazonaws.com/153553034/289691894-ecf6bf92-9fd6-427e-8c83-3ddce18eefa2.jpg?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAVCODYLSA53PQK4ZA%2F20240113%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240113T121811Z&X-Amz-Expires=300&X-Amz-Signature=8f3debc38bb1c093582577e66f2ebf0def75f46aa82cdb1297a3f7cf271a2761&X-Amz-SignedHeaders=host&actor_id=0&key_id=0&repo_id=730370407" draggable="false"/>
            <img class="image" src="Settings.PNG" draggable="false"/>
            <img class="image" src="https://github-production-user-asset-6210df.s3.amazonaws.com/153553034/289691782-8643510e-6288-4151-8e0b-018a3d276265.jpg?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAVCODYLSA53PQK4ZA%2F20240113%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240113T121912Z&X-Amz-Expires=300&X-Amz-Signature=a0b8072d79ad6369fe85ce11894b886faf3727fa371dc4d14f0e052ab28d8774&X-Amz-SignedHeaders=host&actor_id=0&key_id=0&repo_id=730370407" draggable="false"/>
        </div>   
    </div>    
    <div class="section7" id = "section7"> Jeu </div>
    <script src="javaScript.js"></script>
</body> 
</html>

Answered By - Mehdi

This Answer collected from stackoverflow and tested by AngularFix community admins, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Tuesday

Why isn't my sticky header changing background color and text?

Issue

Solution

0 comments:

Post a Comment

Popular Posts

Labels