Headroom.js navbrand and navlinks

Question

Headroom.js navbrand and navlinks

577 Views Asked by Bogdan Puscasu At 10 April 2020 at 01:08

I am using Headroom.js in my bootstrap website, and so far so good, working fine the way I want. I have a question though: Is there any way to change navbrand and customize navlinks when in "notTop"?! Let me be clearer, When fixed, I use a transparent navbar with a white version of the logo and white navlinks, BUT, when scrolled down, I need the navbar white transparent, navlinks darker/black, and a black version of my logo. Most likely it can be done but I haven't been able to find a solution for this. Thanks in advance.

Original Q&A

There are 1 best solutions below

**Ashish Patel** · Accepted Answer · 2020-04-11T17:45:40.093000

Here is how you can achieve the desired effect. Simply apply styles based on top and notTop scenario. Run the working stack snippet below to see it in action.

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

<html>

<head>
  <script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
  <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css">
  <script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/headroom/0.11.0/headroom.min.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/headroom/0.11.0/jQuery.headroom.min.js"></script>
</head>

<body>
  <header id="header" class="header header--fixed hide-from-print" role="banner">
    <div class="container">
      <nav class="navbar navbar-expand-sm">
        <a class="navbar-brand" href="#">
          <img src="https://i.ya-webdesign.com/images/bootstrap-svg-1.png" width="30" height="30" class="align-top headroom--top-logo" alt="">
          <img src="https://friconix.com/png/fi-cnluxx-bootstrap-b.png" width="30" height="30" class="d-none align-top headroom--not-top-logo" alt="">     
        </a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
        <div class="collapse navbar-collapse" id="navbarNav">
          <ul class="navbar-nav">
            <li class="nav-item active">
              <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Features</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Pricing</a>
            </li>
          </ul>
        </div>
      </nav>
    </div>
  </header>
  <article>
    <div id="hero"></div>
    <div class="container block main" role="main">
      <h2>What's it all about?</h2>

      <p>Headroom.js is a lightweight, high-performance JS widget (with no dependencies!) that allows you to react to the user's scroll. The header on this site is a living example, it slides out of view when scrolling down and slides back in when scrolling
        up.
      </p>

      <h3>Why use it?</h3>

      <p>Fixed headers are a popular approach for keeping the primary navigation in close proximity to the user. This can reduce the effort required for a user to quickly navigate a site, but they are not without problems… </p>

      <p>Large screens are usually landscape-oriented, meaning less vertical than horizontal space. A fixed header can therefore occupy a significant portion of the content area. Small screens are typically used in a portrait orientation. Whilst this results
        in more vertical space, because of the overall height of the screen a meaningfully-sized header can still be quite imposing.</p>

      <p>Headroom.js allows you to bring elements into view when appropriate, and give focus to your content the rest of the time.</p>
    </div>
  </article>
</body>

</html>

Headroom.js navbrand and navlinks

There are 1 best solutions below

Related Questions in JAVASCRIPT

Related Questions in JQUERY

Related Questions in CSS

Related Questions in TWITTER-BOOTSTRAP

Related Questions in HEADROOM.JS

Trending Questions

Popular # Hahtags

Popular Questions