基础导航栏过渡链接

Question

我在 javascript 中制作了导航栏过渡，因此当我向下滚动时，导航栏的背景颜色发生了变化。一切正常，除了导航栏 links，我为 links 创建了一个新 ID，但只是首先 link 改变了颜色，其他的没有。

    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);

这是代码：http://codepen.io/anon/pen/vEgVQy 我正在使用 sass，所以这就是为什么有很多 css，只需向下滚动到 css.

的末尾

Answer 1

所以我分叉了你的 codepen 并使转换成功。

我将解释我执行的步骤：

我从导航栏 link 中删除了 ID #menulink。请注意，ID 只能用于一个元素。这也是为什么您只更改了页面上的第一个 link。
我只是将 link 的背景颜色设置为透明，以使 topbar 的颜色变化可见。
我删除了处理具有菜单元素的 JavaScript-代码link-ID，就像我在 HTML.

所以在我的 codepen 中过渡有效，但为了获得完美的结果，您还可以对鼠标悬停样式和下拉元素应用更改。

希望对您有所帮助！

基础导航栏过渡链接

Foundation navbar transition links

html

javascript

css

css-transitions