Headroom. js navbrand и navlinks

Question

Я использую Headroom. js на моем bootstrap веб-сайте, и пока все хорошо, работает хорошо, как я хочу. У меня есть вопрос: есть ли в любом случае, чтобы изменить navbrand и настроить ссылки, когда в "notTop" ?! Позвольте мне быть более ясным, Когда исправлено, я использую прозрачную панель навигации с белой версией lo go и белыми ссылками навигации, НО, при прокрутке вниз, мне нужна белая прозрачная панель навигации, ссылки темнее / черная и черная версия моего л go. Скорее всего, это можно сделать, но я не смог найти решение для этого. Заранее спасибо.

Answer 1

Вот как можно добиться желаемого эффекта. Просто примените стили на основе сценариев top и notTop. Запустите фрагмент рабочего стека ниже, чтобы увидеть его в действии.

$(function() {
  const options = {
    // vertical offset in px before element is first unpinned
    offset: 100,
    // scroll tolerance in px before state changes
    tolerance: 5,
    // css classes to apply
    classes: {
      // when above offset
      top: "headroom--top",
      // when below offset
      notTop: "headroom--not-top"
    },
  };

  $("#header").headroom(options);
  
  // remove the display none on second logo image inside
  // set timeout to avoid glitchy flash of the image and 
  // ensure smooth transition when the display property of 
  // the logo image changes based on page scroll.
  setTimeout(function(){
    $(".headroom--not-top-logo").removeClass('d-none');
  }, 100);
})

html,
body {
  height: 2000px;
  scroll-padding-top: 50px;
  /* set to the height of your header */
}

#hero {
  background-color: #0093E9;
  background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%);
  min-height: 500px;
  margin-bottom: 60px;
}

.header--fixed {
  position: fixed;
  z-index: 10;
  right: 0;
  left: 0;
  top: 0;
}

.headroom--top a {
  color: #fff;
}

.headroom--not-top {
  background: rgba(255, 255, 255, 0.8);
  will-change: background;
  transition: background 1s;
}

.headroom--not-top a {
  color: #222;
}

.headroom--top .navbar-brand img {
  will-change: display;
  transition: display 1s;
}

.headroom--top .navbar-brand .headroom--not-top-logo {
  display: none;
}
.headroom--top .navbar-brand .headroom--top-logo {
  display: inline-block;
}

.headroom--not-top .navbar-brand .headroom--top-logo {
  display: none;
}
.headroom--not-top .navbar-brand .headroom--not-top-logo {
  display: inline-block;
}