如何在滚动时将 navbar-default 更改为 navbar-inverse？答案

【问题标题】：How to change navbar-default to navbar-inverse on scroll?如何在滚动时将 navbar-default 更改为 navbar-inverse？
【发布时间】：2016-06-28 12:22:56
【问题描述】：

在我的网站顶部，主要的导航类是：

navbar navbar-default navbar-fixed-top bg

我正在努力做到这一点，当您滚动时，类会更改为，以便我可以创建更优雅、更轻松的滚动动画：

navbar navbar-inverse navbar-fixed-top bg

这是如何用 Javascript 完成的？我在互联网上找不到任何东西...我确实找到的一件事让您删除了一个课程但不起作用，因为我一次喜欢 10 个不同的课程...

【问题讨论】：

真的吗？网上什么都没有？那里应该有数千个..您尝试过什么吗？
查看 jquery，例如 .scrollTop()，然后根据滚动值添加或删除类。
Add/remove class with jquery based on vertical scroll?的可能重复
@choz 不，这行不通，因为我有 5 个课程。我以前试过。
@XanderLuciano 我试过了，但它通常只会弄乱整个页面：/

标签： javascript jquery html css twitter-bootstrap

【解决方案1】：

这是一个例子。

当您向下滚动超过某个点时，使用 $(window).scroll() 和 addClass() 将 bg 类添加到您的导航中。 请注意，addClass 和 removeClass 允许您从存在多个类的标签中添加/删除单个类名。

请注意，您可能需要使用!important 来强制更改颜色——引导程序可能很顽强。

var viz=true, win = $(window), nav=$('nav');

win.scroll(function(){

    pos = win.scrollTop();
  
    if ( viz && pos > 100 ){
      viz = false;
      nav.addClass('bg');
    }else if ( !viz && pos < 100 ){
      viz = true;
      nav.removeClass('bg');
    }

});

body,
html {
  height: 2000px;
}
.bg{background:green !important;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span> 
      </button>
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a>
        </li>
        <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1
        <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Page 1-1</a>
            </li>
            <li><a href="#">Page 1-2</a>
            </li>
            <li><a href="#">Page 1-3</a>
            </li>
          </ul>
        </li>
        <li><a href="#">Page 2</a>
        </li>
        <li><a href="#">Page 3</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

【讨论】：