I created a JavaScript navbar transition that changes the background color of the navbar as you scroll down. Everything seems to be working fine except for the navbar links. I assigned a new id to the links, but only the first link changes color and the others do not.
var topbar, containtogrid, menulink, yPos;
function yScroll(){
topbar = document.getElementById('topbar');
containtogrid = document.getElementById('containtogrid');
menulink = document.getElementById('menulink');
yPos = window.pageYOffset;
if(yPos > 150){
topbar.style.backgroundColor = "#484848";
containtogrid.style.backgroundColor = "#484848";
menulink.style.backgroundColor = "#484848";
} else {
topbar.style.backgroundColor = "#00A7B7";
containtogrid.style.backgroundColor = "#00A7B7";
menulink.style.backgroundColor = "#00A7B7";
}
}
window.addEventListener("scroll", yScroll);
Here is the code: http://codepen.io/anon/pen/vEgVQy. I am using Sass, which is why there is a lot of CSS - just scroll down to the end of the CSS section.