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);
    }

Answer 2

首先，如果您想定位具有CSS的.navbar-default类的.active，则必须这样做：

.navbar-default.active {}

现在，添加position:fixed;

后，您的CSS应如下所示

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

请参阅the Fiddle

为了防止导航每次启用/禁用固定位置时跳转，我只需在if语句中添加>=：

if (scroll >= 0) {
    $(".navbar-default").addClass("active");
} else {
    $(".navbar-default").removeClass("active");
}

正如Sijie Wang所提到的，为了防止控制台出错，你必须在你的小提琴中包含一个jQuery库。

向下滚动时，我的盒底阴影不起作用

2 个答案: