0

So adding and removing the "sticky"-class to the navbar works perfectly fine. Addding and removing the "i" class doesn't, though. It either remains the whole time or is "removed" the whole time, depending on the navbar.offsetTop when the page is loaded.

I don't get why (and how to make it work correctly). Can you please help?

<div id="navbar-brand">
    <a class="navbar-brand" href="#">Innere Kinder</a>
</div>

.i {
 display: none;
}

var navbar = document.getElementById("sticky_navbar");
var brand = document.getElementById("navbar-brand");
var sticky = navbar.offsetTop;

function stickyNavbar() {
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky");
    brand.classList.remove("i");
  } else {
    navbar.classList.remove("sticky");
    brand.classList.add("i");
  }
}

function init() {
window.addEventListener('scroll', stickyNavbar, false);
}

document.addEventListener('load', init, false);
Nat_
  • 141
  • 8
  • 1
    You need to pass the function, not the result of it. `window.addEventListener('scroll', stickyNavbar, false);` – George Nov 12 '18 at 16:18
  • Ok, changed it... But t still doesn't fix the problem with the "i". – Nat_ Nov 12 '18 at 16:21
  • `document.getElementById("sticky_navbar");` you don't have an element with the Id "sticky_navbar" – George Nov 12 '18 at 16:25
  • yes I do. I just didn't copy that part, because the sticky_navbar part works. As I said. It works perfectly fine. The 'i' class part is what does not work. – Nat_ Nov 12 '18 at 16:30

0 Answers0