基础导航栏过渡链接

Question

我在javascript导航栏过渡中做了，所以当我向下滚动导航栏的背景颜色时，导航栏的背景颜色发生了变化。除了导航栏链接外，一切正常，我为链接创建了一个新ID，但只有第一个链接更改了颜色，而其他链接则没有。

    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

所以我分叉了你的代码笔并使过渡工作。

我将解释我采取的步骤：

1. 我从导航栏链接中删除了 id #menulink。请注意，ID只能用于一个元素。这也是您只更改页面上的第一个链接的原因。
2. 我只是将链接的背景颜色设置为透明，以使topbar的颜色变化可见。
3. 我删除了处理具有menulink-ID的元素的JavaScript代码，因为我在HTML中删除了它们。

因此，在我的代码笔中，过渡有效，但为了获得完美的结果，您还可以对鼠标悬停样式和下拉元素进行更改。

希望我能帮到你！