Bootstrap 将默认导航栏转换为固定导航栏

Question

如何转换我的默认导航栏

进入固定导航栏（当我滚动时）

这是我的示例代码：

 <div class="navbar navbar-default">
                <div class="navbar-header">
                  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                  </button>
                  <a class="navbar-brand" href="#">Brand</a>
                </div>
                <div class="navbar-collapse collapse navbar-responsive-collapse">
                  <ul class="nav navbar-nav">
                    <li class="active"><a href="#">Active</a></li>
                    <li><a href="#">Link</a></li>
                    <li class="dropdown">
                      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
                      <ul class="dropdown-menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li class="divider"></li>
                        <li class="dropdown-header">Dropdown header</li>
                        <li><a href="#">Separated link</a></li>
                        <li><a href="#">One more separated link</a></li>
                      </ul>
                    </li>
                  </ul>
                  <form class="navbar-form navbar-left">
                    <input type="text" class="form-control col-lg-8" placeholder="Search">
                  </form>
                  <ul class="nav navbar-nav navbar-right">
                    <li><a href="#">Link</a></li>
                    <li class="dropdown">
                      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
                      <ul class="dropdown-menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                      </ul>
                    </li>
                  </ul>
                </div>
              </div>
            </div>

当我插入 data-spy="affix" data-offset-top="200" 时，它可以工作，但它看起来不像我想要的那样。

我应该编写另一个 CSS 类还是有更简单的解决方案？

Answer 1

要在滚动页面时更改元素的 CSS，最好的方法是创建另一个 CSS 类，其中包含您需要的所有规则，例如：

.navbar-sm {
    background-color:red;
    /*all the rules that you need*/
}

然后用 JQUERY 将其添加到元素中：

$(document).ready(function () {

$(window).scroll(function () {
    if ($(window).scrollTop() > 100) {
        $('.navbar').addClass('navbar-sm');
    } else {
        $('.navbar').removeClass('navbar-sm');
    }
});
if ($(window).scrollTop() > 100) {
    $('.navbar').addClass('navbar-sm');
}

});

这里有一个工作示例：FIDDLE

Answer 2

我的猜测：添加 navbar-fixed-top 类就可以了。

<div class="navbar navbar-default navbar-fixed-top">