javascript - 如何在导航栏折叠之前和之后更改元素？

Question

我正在尝试更改网站导航栏中的一些元素。首先，当用户将鼠标悬停在链接上时，它会在链接下方添加一个边框(以指示用户将鼠标悬停在它上面)，如下所示:

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

当用户向下滚动页面时，导航栏将折叠(如果这是正确的术语？)，并且看起来像这样:

问题是我不希望导航栏折叠时出现底部边框。如何使用 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:

.navbar-default {
    border-color: transparent;
    background-color: #222;
}

/* Name in top left corner */
.navbar-default .navbar-brand {
    font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
    color: white;
}

/* Hover over name in left corner */
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus,
.navbar-default .navbar-brand:active,
.navbar-default .navbar-brand.active {
    color: #888;
}

.navbar-default .navbar-collapse {
    border-color: rgba(255,255,255,.02);
}

/* Navbar button color */
.navbar-default .navbar-toggle {
    border-color: #bf0a0a;
    background-color: #bf0a0a;
}


/* Navbar icon color */
.navbar-default .navbar-toggle .icon-bar {
    background-color: #fff;
}

.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
    background-color: #bf0a0a;
}

.navbar-default .nav li a {
    text-transform: uppercase;
    font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
    font-weight: 400;
    letter-spacing: 1px;
    color: #fff;
}

/* 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;
}

/* Hover over [More] */
.navbar-default .nav > .dropdown-bar a:hover,
.navbar-default .nav > .dropdown-bar a:focus {
    color: #fff;
    outline: 0;
}


.navbar-default .navbar-nav>.active>a {
    border-radius: 0;
    color: #fff;
    background-color: #bf0a0a;
}

.navbar-default .navbar-nav>.active>a:hover,
.navbar-default .navbar-nav>.active>a:focus {
    color: #fff;
    background-color: #407EB0;
}

@media(min-width:768px) {
    .navbar-default {
        padding: 25px 0;
        border: 0;
        background-color: transparent;
        -webkit-transition: padding .3s;
        -moz-transition: padding .3s;
        transition: padding .3s;
    }

    .navbar-default .navbar-brand {
        font-size: 2em;
        -webkit-transition: all .3s;
        -moz-transition: all .3s;
        transition: all .3s;
    }

    .navbar-default .navbar-nav>.active>a {
        border-radius: 3px;
    }

    .navbar-default.navbar-shrink {
        padding: 10px 0;
        background-color: rgba(34, 34, 34, 0.8);
    }

    .navbar-default.navbar-shrink .dropdown-bar:hover > .drop-nav {
        display: block;
        margin-top: 10%;
        padding-right: 100%;
        background-color: rgba(34, 34, 34, 0.8);
    }

    .navbar-default.navbar-shrink .navbar-brand {
        font-size: 1.5em;
    }
}

专门在悬停时添加边框的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();

})();

Answer 1

当用户向下滚动页面时，navbar-shrink 被添加到导航栏，它覆盖了 navbar-default 中的一些样式。同样，您可以通过在默认悬停代码下方使用此代码来覆盖默认悬停行为。

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