Javascript 如何在&；在导航栏崩溃之后？

我试图改变网站导航栏中的一些元素。首先，当用户将鼠标悬停在链接上时，它会在链接下方添加一个边框（表示用户将鼠标悬停在链接上），如下所示：

导航栏在页面顶部是透明的

当用户向下滚动页面时，导航栏将折叠（如果这是正确的术语？），如下所示：

问题是，我不希望在收拢导航栏时显示底部边框。我如何用CSS解决这个问题

以下是我的HTML：

<nav class="navbar navbar-default navbar-fixed-top">
      <div class=container>
        <div class="navbar-header page-scroll">
          <button type=button class=navbar-toggle data-toggle=collapse data-target="#bs-example-navbar-collapse-1">
          <span class=sr-only>Toggle navigation</span>
          <span class=icon-bar></span>
          <span class=icon-bar></span>
          <span class=icon-bar></span>
          </button>
          <a class="navbar-brand page-scroll" href="#page-top"></a>
        </div>
        <div class="collapse navbar-collapse">
          <ul class="nav navbar-nav navbar-right">
            <li class=hidden>
              <a href="#page-top"></a>
            </li>
            <li class=main-links>
              <a class=page-scroll href="#about">About</a>
            </li>
            <li class=main-links>
              <a class=page-scroll href="#portfolio">Portfolio</a>
            </li>
            <li class=main-links>
              <a class=page-scroll href="#contact">Contact</a>
            </li>
            <li class=dropdown-bar>
              <a href=""> More &#9660;</a>
              <ul class=drop-nav>
                <a href=""><li>Blog</li></a>
                <a href=""><li>Resources</li></a>
              </ul>
            </li>
          </ul>
        </div>
      </div>
    </nav>

当鼠标悬停时专门添加边框的CSS位于此处：

/* Hover over [About, Portfolio, Contact, More] */
.navbar-default .nav > .main-links a:hover,
.navbar-default .nav > .main-links a:focus {
    color: #fff;
    outline: 0;
    border-bottom: 4px solid #fff;
    -webkit-transition: all .4s;
    -moz-transition: all .4s;
    transition: all .4s;
}

处理页面滚动和导航栏更改的Javascript：

var cbpAnimatedHeader = (function() {

    var docElem = document.documentElement,
        header = document.querySelector( '.navbar-default' ),
        didScroll = false,
        changeHeaderOn = 300;

    function init() {
        window.addEventListener( 'scroll', function( event ) {
            if( !didScroll ) {
                didScroll = true;
                setTimeout( scrollPage, 250 );
            }
        }, false );
    }

    function scrollPage() {
        var sy = scrollY();
        if ( sy >= changeHeaderOn ) {
            classie.add( header, 'navbar-shrink' );
        }
        else {
            classie.remove( header, 'navbar-shrink' );
        }
        didScroll = false;
    }

    function scrollY() {
        return window.pageYOffset || docElem.scrollTop;
    }

    init();

})();

---

当用户向下滚动页面时，

navbar-shrink

将添加到navbar，这将覆盖

navbar-default

中的一些样式。同样，您可以通过在默认悬停代码下面使用此代码来覆盖默认悬停行为

.navbar-shrink .nav > .main-links a:hover,
.navbar-shrink .nav > .main-links a:focus {
    border-bottom: none;
}

---

你好好啊我想我明白你的意思，但是当它们崩溃时，你给它们添加一个类是什么意思？我到底应该在HTML中更改什么？@FreddieV4好吧，你的导航栏现在是如何进入“折叠模式”的？如何？当用户向下滚动超过page@FreddieV4是的，我明白了。但是代码中必须发生某些事情，才能在滚动时发生更改。如果让我猜的话，我会说有一些javascript可以跟踪你的滚动位置，然后当它到达某个点时，它会向你的导航栏添加一个类来改变它的外观。你能在创建一个例子吗？因此，根据我的

js

文件，添加到导航栏的类是

navbar-shrink

，它被添加到

navbar-default

（我在上面粘贴了js）。所以应该是<代码>/*将鼠标悬停在[About，Portfolio，Contact，More]*/.navbar default.nav>.main links.navbar shrink a:Hover、.navbar default.nav>.main links.navbar shrink a:focus{color:#fff；border bottom:none；}？

.navbar-shrink .nav > .main-links a:hover,
.navbar-shrink .nav > .main-links a:focus {
    border-bottom: none;
}