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.
Advertisement
Answer
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>