html - 向下滚动时，我的框底阴影不起作用

Question

我试图在向下滚动时向固定标题添加框底阴影。不确定我做错了什么，但它不起作用。这是我的代码:

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
      <div class="container-fluid">
       <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
           <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
              <i class="fa fa-bars"></i>
           </button>
            <a href="http://www.aspentech.com/" class="navbar-brand">
              <img class="img-responsive" src="img/logo@2x.png">
            </a>
        </div>
        <div class="login">
               <ul class="nav navbar-nav navbar-right">
                  <li class="active">
                  <a id="loginLink" href="#" class="navbar-text navbar-icon-link">
                  <span class="navbar-profile-icon center-block"></span>Hello, Sijie!</a>
                  </li>
               </ul>
        </div>
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
              <ul class="nav navbar-nav subnav-nav">
                <li class="subnav">
                  <span class="navbar-text subnav-link" id="subnav-link-1"><a class="sub" href="index.html">aspenOne Update Center</a></span>
                </li>
                <li class="subnav">
                  <span class="navbar-text subnav-link activated" id="subnav-link-2"><a class="sub activated" href="download center.html">aspenOne Download Center</a></span>
                </li>
              </ul>
         </div>
      </div>
     </nav>

我的代码在这里:http://jsfiddle.net/Swathi56/dojcr29w/ 这是我从 Chrome 控制台收到的错误的屏幕截图。

Answer 1

在 css 而不是

.navbar-default .active {
      box-shadow: 0 6px 4px -4px rgba(0,0,0,.3);

    }

做吧

.active {
      box-shadow: 0 6px 4px -4px rgba(0,0,0,.3);
    }