0

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 but I cannot get any change to occur. My code is as follows:

var myNav = document.getElementById('mynav');
window.onscroll = function() {

  if (document.body.scrollTop >= 200) {
    myNav.classList.add("nav-bar");
    myNav.classList.remove("navtransparent");
  } else {
    myNav.classList.add("navtransparent");
    myNav.classList.remove("nav-bar");
  }
};
.nav-bar {
  position: fixed;
  z-index: 9999;
  top: 0;
  width: 100%;
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid #696969;
  background-color: #c0c0c0;
}

.navtransparent {
  background-color: transparent;
}

li.navlist {
  float: right;
}

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

li.navlist:hover a {
  background-color: #d3d3d3;
}
<nav div='mynav'>
  <ul class="nav-bar">
    <li class="navlist"><a href="#four">E</a></li>
    <li class="navlist"><a href='#three'>D</a></li>
    <li class="navlist"><a href='#two'>C</a></li>
    <li class="navlist"><a href='#one'>B</a></li>
    <li class="navlist"><a href='#home'>A</a></li>
  </ul>
</nav>
Berdesdan
  • 359
  • 1
  • 5
  • 12
eScripts
  • 11
  • 2
  • Can you post a working fiddle? – Smokey Dawson Nov 30 '17 at 00:45
  • 2
    ` – trevor Nov 30 '17 at 00:46
  • It was originally nav id, I've just been changing bits all day and hadn't noticed that was still div so I've changed it back now, it doesn't give any visible changes though. – eScripts Nov 30 '17 at 00:53
  • Is your desired behaviour to have the nav bar start out as transparent, then turn a solid color when you scroll 200 or more pixels down the page? – trevor Nov 30 '17 at 01:19
  • Yeah that's what I'm aiming for. Also I want it to change the moment you start scrolling from the top of the page, I wasn't sure what pixel amount that is, I just put an amount in to test. – eScripts Nov 30 '17 at 01:27

1 Answers1

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.navlist a {
  display: block;
  padding: 6px;
  padding-left: 10px;
  padding-right: 10px;
  text-align: 14px 16px;
  text-decoration: none;
  color: #4d4d4d;
}

li.navlist:hover a {
  background-color: #d3d3d3;
}
<nav id='mynav'>
  <ul class="nav-bar">
    <li class="navlist"><a href="#four">E</a></li>
    <li class="navlist"><a href='#three'>D</a></li>
    <li class="navlist"><a href='#two'>C</a></li>
    <li class="navlist"><a href='#one'>B</a></li>
    <li class="navlist"><a href='#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.
Gabriele Petrioli
  • 183,160
  • 33
  • 252
  • 304
  • Thanks for you help, I made the changes to the classes so its not all on nav-bar now but instead now I just have a plain white navbar up the top instead of transparent and the fixed position isn't working as the navbar just stays at the top of the page, as in no fixing to the top as you scroll – eScripts Nov 30 '17 at 02:06
  • Yeah your snippet works great, I can use that in codepen and get the results I want but when the rest of my code is added, something is interfering with it but I haven't worked out what it is yet. – eScripts Nov 30 '17 at 16:17