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。我希望这会有所帮助。

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

1 个答案: