CODEWITHSUNDEEP
javascripthtmlcss
Jad
Jad

Reputation: 33

why window.onscroll function acting weird?

I'm pretty new to coding and everything but have gained a pretty good understanding of everything from tutorials and all that stuff.

I'm trying to make this logo change when someone scrolls down. It is working, but i'm trying to figure out why it quickly toggles the classes at the very beginning when the page first loads and someone scrolls down. It only does it at the beginning, but after that it works fine.

Any tips or advice?? Thank you!!

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

function navScroll() {
  var logoNav = document.getElementById("bgNav");

  if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {
    logoNav.className = "play";
  } else {
    logoNav.className = "playBack";
  }
}
@charset "UTF-8";

.container {
  height: 2000px;
  background-color: #c3c3c3;
}

@keyframes play60 {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -30000px 0px;
  }
}

@keyframes play60Back {
  0% {
    background-position: -30000px 0px;
  }
  100% {
    background-position: 0 0;
  }
}

#bgNav.play {
  animation-name: play60;
  animation-fill-mode: forwards;
}

#bgNav.playBack {
  animation-name: play60Back;
  animation-fill-mode: forwards;
}

#bgNav {
  height: 117px;
  width: 500px;
  position: fixed;
  animation-duration: 2000ms;
  animation-timing-function: steps(60);
  background-repeat: no-repeat;
  background-image: url("https://metro1.000webhostapp.com/metro-nav-animated.svg");
}
<!DOCTYPE html>
  <html>
  <body>
  <div class="container">
    <div class="" id="bgNav"></div>

  </div>
  </body>
  </html>

Upvotes: 3

Views: 91

Answers (1)

Chamidu Jayaruwan
Chamidu Jayaruwan

Reputation: 357

This works fine

} else if(logoNav.className === "play") {
    logoNav.className = "playBack";
}


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

function navScroll() {
  var logoNav = document.getElementById("bgNav");

  if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {
    logoNav.className = "play";
  } else if(logoNav.className === "play") {
    logoNav.className = "playBack";
  }
}
@charset "UTF-8";

.container {
  height: 2000px;
  background-color: #c3c3c3;
}

@keyframes play60 {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -30000px 0px;
  }
}

@keyframes play60Back {
  0% {
    background-position: -30000px 0px;
  }
  100% {
    background-position: 0 0;
  }
}

#bgNav.play {
  animation-name: play60;
  animation-fill-mode: forwards;
}

#bgNav.playBack {
  animation-name: play60Back;
  animation-fill-mode: forwards;
}

#bgNav {
  height: 117px;
  width: 500px;
  position: fixed;
  animation-duration: 2000ms;
  animation-timing-function: steps(60);
  background-repeat: no-repeat;
  background-image: url("https://metro1.000webhostapp.com/metro-nav-animated.svg");
}
<!DOCTYPE html>
  <html>
  <body>
  <div class="container">
    <div class="" id="bgNav"></div>

  </div>
  </body>
  </html>

Upvotes: 4

Related Questions