Как реализовать такое загрузочное меню с фиксированной верхней панелью навигации с фоновым изображением и стрелкой вниз на активном элементе

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

и применить ее с вашим активным классом кэлемент clicked.

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

Я также добавил jQuery.Надеюсь, это поможет.