Hide navbar on scroll
headroom.js
extension that allows you to react to the user's scroll. This is a perfect solution, if you alqays want to access your navbar, but bring elements into view when appropriate, and give focus to your content the rest of the time. Supports top
and bottom
placements. Table below contains all plugin options available and can be applied to both top and bottom fixed navbars.
Configuration options
At it's most basic headroom.js
simply adds and removes CSS classes from an element in response to a scroll event. Headroom.js can also accept an options object to alter the way it behaves. You can see the default options by inspecting Headroom.options
. Relying on CSS classes affords headroom.js incredible flexibility. The choice of what to do when scrolling up or down is now entirely yours - anything you can do with CSS you can do in response to the user's scroll. The structure of an options object is as follows:
Option | Description |
---|---|
offset |
Vertical offset in px before element is first unpinned. Value for default navbar is 48px or element.offsetHeight for dynamic calculation. |
tolerance |
Scroll tolerance in px before state changes. Or you can specify tolerance individually for up/down scroll: up and down. |
classes |
CSS classes to apply: initial - when element is initialised, pinned - when scrolling up, unpinned - when scrolling down, top - when above offset, notTop - when below offset, bottom - when at bottom of scoll area, notBottom - when not at bottom of scroll area |
scroller |
Element to listen to scroll events on, defaults to `window` |
onPin : function() {} |
Callback when pinned, 'this' is headroom object |
onUnpin : function() {} |
Callback when unpinned, 'this' is headroom object |
onTop : function() {} |
Callback when above offset, 'this' is headroom object |
onNotTop : function() {} |
Callback when below offset, 'this' is headroom object |
onBottom : function() {} |
Callback at bottom of page, 'this' is headroom object |
onNotBottom : function() {} |
Callback when moving away from bottom of page, 'this' is headroom object |
Configuration examples
Headroom.js allows you to bring navbars into view when appropriate and give focus to your content the rest of the time. Configuration is very simple and is similar to fixed navbars: add .fixed-top
to top navbar and/or .fixed-bottom
to bottom navbar and initialize headroom.js on these classes with options. Note - if your navbar has dropdowns, use code from onUnpin
event to close all dropdowns when navbar gets hidden.
Top hideable navbar markup:
<!-- Document body -->
<body class="navbar-top">
<!-- Main navbar -->
<div class="navbar navbar-dark navbar-expand-lg fixed-top">
<!-- Navbar brand -->
<div class="navbar-brand">
...
</div>
<!-- /navbar brand -->
<!-- Mobile toggler -->
<div class="d-lg-none">
...
</div>
<!-- /mobile toggler -->
<!-- Navbar content -->
<div class="collapse navbar-collapse" id="navbar-top">
...
</div>
<!-- /navbar content -->
</div>
<!-- /main navbar -->
</body>
<!-- /document body -->
Top hideable navbar config:
// Grab an element
var navbarTop = document.querySelector('.fixed-top');
// Construct an instance of Headroom, passing the element
var headroomTop = new Headroom(navbarTop, {
offset: navbarTop.offsetHeight,
tolerance: {
up: 10,
down: 0
},
onUnpin : function() {
$('.navbar').find('.show').removeClass('show');
}
});
// Initialise
headroomTop.init();
Bottom hideable navbar markup:
<!-- Document body -->
<body class="navbar-bottom">
<!-- Main navbar -->
<div class="navbar navbar-dark navbar-expand-lg fixed-bottom">
<!-- Navbar brand -->
<div class="navbar-brand">
...
</div>
<!-- /navbar brand -->
<!-- Mobile toggler -->
<div class="d-lg-none">
...
</div>
<!-- /mobile toggler -->
<!-- Navbar content -->
<div class="collapse navbar-collapse" id="navbar-bottom">
...
</div>
<!-- /navbar content -->
</div>
<!-- /main navbar -->
</body>
<!-- /document body -->
Bottom hideable navbar config:
// Grab an element
var navbarBottom = document.querySelector('.fixed-bottom');
// Construct an instance of Headroom, passing the element
var headroomBottom = new Headroom(navbarBottom, {
offset: navbarBottom.offsetHeight,
tolerance: {
up: 0,
down: 10
},
onUnpin : function() {
$('.navbar').find('.show').removeClass('show');
}
});
// Initialise
headroomBottom.init();
Navbar classes
Class | Type | Description |
---|---|---|
.navbar |
Required | Default navbar class, must be used with any navbar type and color. Responsible for basic navbar and navbar components styling as a parent container. |
.navbar-light |
Required | This class is used for dark background colors - default dark color is set in $navbar-light-bg variable, feel free to adjust the color according to your needs. |
.navbar-dark |
Required | This class is used for dark background colors - default dark color is set in $navbar-dark-bg variable, feel free to adjust the color according to your needs. |
.navbar-dark.bg-* |
Optional | Combination of these classes allows you to set custom dark color to the dark navbar. Note - .navbar-dark is required, it's responsible for correct content styling. |
.navbar-expand-[breakpoint] |
Optional | For navbars that never collapse, add the .navbar-expand class on the navbar. For navbars that always collapse, don’t add any .navbar-expand class. Otherwise use this class to change when navbar content collapses behind a button. |
.navbar-brand |
Required | Class for logo container. It can be applied to most elements, but an anchor works best as some elements might require utility classes or custom styles |
.navbar-toggler |
Required | This class needs to be added to the navbar toggle button that toggles navbar content on small screens. Always used with visibility utility classes. |
.navbar-collapse |
Required | Groups and hides navbar contents by a parent breakpoint. Requires an ID for targeting collapsible container when sidebar content is collapsed. |
.navbar-nav |
Required | Responsive navigation container class that adds default styling for navbar navigation. |
.nav-item |
Required | Wrapper class for immediate parents of all navigation links. Responsible for correct styling of nav items |
.navbar-nav-link |
Required | Custom class for links within .navbar-nav list, it sets proper styling for links in light and dark navbars. |
.navbar-text |
Required | This class adjusts vertical alignment and horizontal spacing for strings of text |
.sticky-top |
Optional | Adds position: sticky; to the navbar - it's treated as relatively positioned until its containing block crosses a specified threshold, at which point it is treated as fixed. Support is limited. |
Body classes
position: fixed
, meaning they’re pulled from the normal flow of the DOM and require custom classes added to the <body>
container to prevent overlap with other elements. The following table demonstrates the list of classes for <body>
container if navbar has non-static position:
Class | Description |
---|---|
.navbar-top |
This class adds top padding to the <body> container. Works only with default navbar height. If another height is specified, apply another class (see the line below). |
.navbar-bottom |
This class adds bottom padding to the <body> container. Works only with default navbar height. If another height is specified, apply another class (see the line below). |
.navbar-top-[size] |
Controls top spacing of <body> container, if navbar has optional height. Available sizes: small (*-sm ) and large (*-lg ). Default navbar requires .navbar-top class only. |
.navbar-bottom-[size] |
Controls bottom spacing of <body> container, if navbar has optional height. Available sizes: small (*-sm ) and large (*-lg ). Default navbar requires .navbar-bottom class only. |
.navbar-top-[size]-[size] |
Use these classes if the layout has multiple top navbars, where first [size] is the size of the first navbar, second [size] - height of the second navbar. In this particular use case, [size] can be: lg if large height, md is default height sm is small height.
|
.navbar-bottom-[size]-[size] |
Use these classes if the layout has multiple bottom navbars, where first [size] is the size of the first navbar, second [size] - height of the second navbar. In this particular use case, [size] can be: lg if large height, md is default height sm is small height.
|