如何实现这种带有背景图像和活动项目向下箭头的引导固定顶部导航栏菜单

Question

我正在使用 boostrap 4 并尝试实现这样的导航栏： https://www.dropbox.com/s/0l9kmeirf04x39e/navbar_desired.jpg

导航栏是固定底部的，并且在向下滚动视口高度后必须是固定顶部。这与此 html 代码完美配合：

  <!-- Navigation -->
  <nav class="navbar navbar-expand-lg navbar-light fixed-bottom" id="mainNav">
    <div class="container">
      <a class="navbar-brand js-scroll-trigger" href="#page-top"><img src="img/logo_small.png"></a>
      <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarResponsive">
        <ul class="navbar-nav navbar-center ml-auto my-2 my-lg-0">
          <li class="nav-item">
            <a class="nav-link js-scroll-trigger" href="#a">Link 1</a>
          </li>
          <li class="nav-item">
              <a class="nav-link js-scroll-trigger" href="#b">Link 2</a>
            </li>
          <li class="nav-item">
            <a class="nav-link js-scroll-trigger" href="#c">Link 3</a>
          </li>
          <li class="nav-item">
              <a class="nav-link js-scroll-trigger" href="#d">Link 4</a>
            </li>
          <li class="nav-item">
            <a class="nav-link js-scroll-trigger" href="#e">Link 5</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

  <!-- Masthead -->
  <header id="home" class="masthead">
    <div class="container-fluid h-100">
      <div class="row content">
        <div class="col-10 offset-1 col-xs-12 offset-xs-0 align-self-end">
          <div id="brand-fixed-masthead"><img src="img/logo_big.png"></div>
          <h1 class="text-white mt-5">Lorem ipsum dolor sit amet.</h1>
          <p class="text-white text-uppercase font-weight-light mb-5">Lorem ipsum dolor sit amet.</p>
        </div>
      </div>
    </div>
  </header>

以及 jQuery 的这一部分：

  // Collapse Navbar
  var distance = $('#mainNav').offset().top;
  var navheight = $('#mainNav').outerHeight();
  var navbarCollapse = function () {
    if ($(window).scrollTop() >= distance) {
      $('#mainNav').removeClass('fixed-bottom');
      $('#mainNav').addClass('fixed-top');
      $('#intro').addClass('masthead-fixed-top');
    } else if ($(window).scrollTop() <= distance) {
      $('#mainNav').removeClass('fixed-top');
      $('#mainNav').addClass('fixed-bottom');
      $('#intro').removeClass('masthead-fixed-top');
    }

  };

  // Collapse now if page is not at top
  navbarCollapse();

  // Collapse the navbar when page is scrolled
  $(window).scroll(navbarCollapse);

这就是我现在拥有的： https://www.dropbox.com/s/h8a5s5jlm3y4l37/navbar_now.jpg

但我不知道如何在活动链接项上引入背景箭头。

非常欢迎提出建议。

Answer 1

不用担心，您不需要任何胶水即可。

使用 css :after 创建箭头

:after {
    content:'';
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 0;
    height: 0;
    border-top: solid 50px #e15915;
    border-left: solid 50px transparent;
    border-right: solid 50px transparent;
}

并将它与您的活动类一起应用于单击的元素。

https://codepen.io/carlos27/pen/WBqWPp

我也添加了 jQuery。我希望这会有所帮助。