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

所以我分叉你的codepen并使过渡工作。

我将解释我所采取的步骤：

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

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

希望我能帮到你！

基础导航栏过渡链接

1 个答案: