Navbar Change On Scroll, Can't Use Libraries

I'm trying to make my navbar a solid colour after scrolling from transparent. I've looked at examples but they are using bootstrap/libraries which I can't use. I've tried using JS

Solution 1:

The main problem (after you fix the id), is that you have the .nav-bar class already on the ul which makes that be fixed from the beginning.

So break the styling for the ul and the styling for the fixed #mynav to different rules.

You also need to check both the document.body.scrollTop and the document.documentElement.scrollTop as some browsers scroll the html and others the body.

var myNav = document.getElementById('mynav');
window.onscroll = function() {
  var scroll = document.body.scrollTop || document.documentElement.scrollTop;
  
  if (scroll >= 50) {
    myNav.classList.add("navfixed");
    myNav.classList.remove("navtransparent");
  } else {
    myNav.classList.add("navtransparent");
    myNav.classList.remove("navfixed");
  }
};

.nav-bar {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
.navfixed{
  position:fixed;
  z-index: 9999;
  top: 0;
  width: 100%;
  left:0;
  background-color: #c0c0c0;
  border: 1px solid #696969;
}
.navtransparent {
  background-color: transparent;
}

li.navlist {
  float: right;
}

li.navlista {
  display: block;
  padding: 6px;
  padding-left: 10px;
  padding-right: 10px;
  text-align: 14px16px;
  text-decoration: none;
  color: #4d4d4d;
}

li.navlist:hovera {
  background-color: #d3d3d3;
}

<navid='mynav'><ulclass="nav-bar"><liclass="navlist"><ahref="#four">E</a></li><liclass="navlist"><ahref='#three'>D</a></li><liclass="navlist"><ahref='#two'>C</a></li><liclass="navlist"><ahref='#one'>B</a></li><liclass="navlist"><ahref='#home'>A</a></li></ul></nav>

 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae fringilla sapien. In nec dui erat. Pellentesque a arcu sit amet est lacinia aliquam sed nec orci. Aliquam vitae euismod eros. Proin varius quam nec eros eleifend placerat. Morbi sed maximus purus. Pellentesque odio enim, varius a viverra a, finibus id dolor. Curabitur pulvinar pellentesque leo, consequat porttitor dui laoreet at. Maecenas accumsan libero nec mi sollicitudin, sed porttitor sem tristique. Maecenas viverra faucibus urna et suscipit. Cras vulputate odio at mi egestas ornare ut sit amet ligula.

Nulla imperdiet nisi id purus dapibus, at sodales lectus ornare. Praesent vehicula diam non lorem porta iaculis eget id ante. Phasellus ullamcorper purus sit amet vestibulum fringilla. Donec auctor dignissim dolor ut consectetur. Nulla vitae nulla lectus. Etiam pretium blandit libero, vehicula varius quam pulvinar id. Etiam quis orci pellentesque, volutpat massa a, suscipit lorem.

Suspendisse posuere diam quis ex aliquam sodales. Ut vel erat in nibh aliquet iaculis. Fusce at aliquam nulla, eget tristique tortor. Donec lobortis, arcu sit amet scelerisque ullamcorper, metus augue sollicitudin velit, a placerat leo turpis eu lectus. Phasellus cursus dictum dui et venenatis. Donec non tempor odio. Aenean at ipsum sed sapien volutpat laoreet. Donec in lorem est. Fusce tortor diam, faucibus eget lectus quis, elementum tempus ex.

Vestibulum in luctus eros, vel rutrum augue. Ut ultricies velit sit amet diam convallis aliquam. Curabitur vel ipsum nisl. Proin dapibus tortor eget tortor congue faucibus. Duis sit amet purus et ipsum consectetur vulputate non at arcu. Curabitur consectetur et ipsum id aliquam. Sed auctor massa at vestibulum vehicula. In consequat scelerisque ornare. Vestibulum pharetra nisi eget congue ultrices. Nullam quis elementum libero. Proin quis nisi ut tellus ultricies pharetra. Curabitur dignissim neque id nulla dictum fringilla. Vivamus tempus elit ipsum, finibus mattis tortor consectetur vitae.