JavaScript改变导航条颜色的滚动不起作用

JavaScript to change navbar color on scroll not working

本文关键字：滚动 不起作用 颜色 改变 导航 JavaScript      更新时间：2023-09-26

我的目标是使导航栏在滚动后从透明变为指定的颜色。然而，我的代码似乎并不有效，因为滚动后，栏仍然是透明的。我已经搜索了这个问题与一些成功，但我觉得我的js代码应该是足够的，我想要完成;只是没有一些我在js, css或html文件中可能出现的小错误。

JS: 

$(document).ready(function()
{
    var scroll_start = 0;
    var startchange = $('.navbar-default');
    var offset = startchange.offset();
    $(document).scroll(function() 
    {
        scroll_start = $(this).scrollTop();
        if (scroll_start > offset.top)
        {
            $('.navbar-default').css('background-color', 'black');
        }
        else
        {
            $('.navbar-default').css('background-color', 'transparent');
        }
    });
});
CSS: 

.navbar-default {
    background: transparent !important;
    transition-duration: 1s;
}
.color-fix>li>a {
    color: white !important;
}
.color-fix>a {
    color: white !important;
}
#nav-right {
    float: right;
}

HTML:(未定义的类来自bootstrap)

<nav class="navbar navbar-default navbar-fixed-top">
   <div class="navbar-header color-fix">
       <a class="navbar-brand" href="">g·nee</a>
   </div>
   <ul class="nav navbar-nav color-fix" id="nav-right">
      <li><a href="">Home</a></li>
      <li><a href="">Page 1</a></li>
      <li><a href="">Page 2</a></li>
   </ul>
</nav>

!important是在方式，删除它，它的工作。

https://jsfiddle.net/2gq2nqhr/

从css中移除!important，防止样式覆盖。

.navbar-default {
    background: transparent ;
    transition-duration: 1s;
}
.color-fix>li>a {
    color: white ;
}
.color-fix>a {
    color: white;
}
#nav-right {
    float: right;
}
相关文章：