Foundation navbar transition links

debugcn Published at Dev

user4442171

I made in javascript navbar transition, so when i scroll down background color of navbar is changed. Everything works fine except navbar links, i made a new id for links but just first link changes the color and other are 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);

This is the code: http://codepen.io/anon/pen/vEgVQy I am using sass so that is why there is lot of css, just scroll down to end of the css.

snrlx

So I forked your codepen and made the transition work.

I will explain the steps that I undertook:

I removed the id #menulink from the navbar links. Please note that IDs can only be used for one element. That's also why you only changed the first link on your page.
I simply set the background color of the links to transparent in order to make the color change of the topbar visible.
I removed the JavaScript-code that deals with the elements that have menulink-IDs as I removed them in the HTML.

So in my codepen the transition works but for the perfect result you might also apply changes to the mouseover styles and the dropdown elements.

Hope I was able to help you!

Collected from the Internet

Please contact [email protected] to delete if infringement.