Question

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

navbar navbar-default navbar-fixed-top bg

我正在尝试这样做，当你滚动时，类会改变，所以我可以创建一个更优雅，更容易的滚动动画：

navbar navbar-inverse navbar-fixed-top bg

如何使用Javascript实现这一目标？我在互联网上找不到任何东西......我找到的一件事就是让你删除一个班级但是没有工作因为我一次就有10个不同的班级......

Answer 1

这是一个例子。

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

请注意，您可能需要使用!important强制颜色更改 - bootstrap可能很顽强。

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>

如何在滚动条上将navbar-default更改为navbar-inverse？

1 个答案: