Description
The hide on scroll option use to hide your fixed top or bottom navbar on page scroll down, once you scroll up again it will be visible. In this page you can experience it.
This table contains all classes related to the fixed top or bottom navbar with hide on scroll.
All these options can be set via following classes:
| Classes | Description |
|---|---|
.navbar-hide-on-scroll |
To set navbar hide on scroll you need to add .navbar-hide-on-scroll class in navbar <nav> tag. Refer HTML
markup line no 7. |
.fixed-top |
To hide on scroll you need to set navbar fixed also, add
fixed navbar in top .fixed-top class in navbar
<nav> tag. Refer HTML markup line no
7.
|
.fixed-bottom |
Tohide on scroll you need to set navbar fixed also, add fixed
navbar in bottom .fixed-bottom class in navbar
<nav> tag. Refer HTML markup line no
7.
|
This section contains HTML Markup to set navbar hide on scroll. This markup define where to add css classes to make navbar hide on scroll.
-
Line no 7: Contain the
.navbar-hide-on-scrollclass to make navbar hide on scroll. -
Line no 7: Contain the
.fixed-topor.fixed-bottomclass for adjusting navbar fixed on top.
Modern has a ready to use starter kit, you can use this layout directly
by using the starter kit pages from the modern-admin/starter-kit folder.
<!DOCTYPE html>
<html lang="en">
<head></head>
<body data-menu="vertical-menu" class="vertical-layout vertical-menu 2-column menu-expanded">
<!-- navbar-hide-on-scroll-->
<nav role="navigation" class="header-navbar navbar-expand-sm navbar navbar-with-menu navbar-hide-on-scroll fixed-top navbar-dark navbar-shadow navbar-border">
...
</nav>
<!-- BEGIN Navigation-->
<div class="main-menu menu-dark menu-shadow">
...
</div>
<!-- END Navigation-->
<!-- BEGIN Content-->
<div class="content app-content">
<div class="content-wrapper">
<!-- content header-->
<div class="content-header row">
...
</div>
<!-- content header-->
<!-- content right-->
<div class="content-right">
...
</div>
<!-- content right-->
</div>
</div>
<!-- END Content-->
<!-- START FOOTER DARK-->
<footer class="footer footer-dark">
...
</footer>
<!-- START FOOTER DARK-->
</body>
</html>
Modern Admin use headroom.js to functionate navbar hide on scroll. You need to use the following headroom.js configurations code for customization. File app.js has the following code for customization.
Plugin overview
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.
Plugin options
Headroom.js can also accept an options object to alter the way it behaves. You can see the default options by inspecting Headroom.options. The structure of an options object is as follows:
{
// vertical offset in px before element is first unpinned
offset : 0,
// scroll tolerance in px before state changes
tolerance : 0,
// or you can specify tolerance individually for up/down scroll
tolerance : {
up : 5,
down : 0
},
// css classes to apply
classes : {
// when element is initialised
initial : "headroom",
// when scrolling up
pinned : "headroom--pinned",
// when scrolling down
unpinned : "headroom--unpinned",
// when above offset
top : "headroom--top",
// when below offset
notTop : "headroom--not-top",
// when at bottom of scroll area
bottom : "headroom--bottom",
// when not at bottom of scroll area
notBottom : "headroom--not-bottom"
},
// element to listen to scroll events on, defaults to `window`
scroller : someElement,
// callback when pinned, `this` is headroom object
onPin : function() {},
// callback when unpinned, `this` is headroom object
onUnpin : function() {},
// callback when above offset, `this` is headroom object
onTop : function() {},
// callback when below offset, `this` is headroom object
onNotTop : function() {},
// callback when at bottom of page, `this` is headroom object
onBottom : function() {},
// callback when moving away from bottom of page, `this` is headroom object
onNotBottom : function() {}
}
| Options | Data type | Description |
|---|---|---|
offset |
Number | Vertical offset in px before element is first unpinned. |
tolerance |
Number | Scroll tolerance in px before state changes,or you can specify tolerance individually for up/down scroll. |
initial |
String | When element is initialised this class will be applied. |
pinned |
String | when scrolling up, this class will be applied. |
unpinned |
String | When scrolling down, this class will be applied. |
Top |
String | When above offset, this class will be applied. |
notTop |
String | When below offset, this class will be applied. |
bottom |
String | When at bottom of scroll area, this class will be applied. |
notBottom |
String | When not at bottom of scroll area, this class will be applied. |
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 when at bottom of page, `this` is headroom object. |
onNotBottom |
function | Callback when moving away from bottom of page, `this` is headroom object. |
In Modern Admin we have just used following headroom.js configurations
options in js/code/app.js
Top navbar position example:
// Top Navbars - Hide on Scroll
$(".navbar-hide-on-scroll.fixed-top").headroom({
"offset": 205,
"tolerance": 5,
"classes": {
// when element is initialised
initial : "headroom",
// when scrolling up
pinned : "headroom--pinned-top",
// when scrolling down
unpinned : "headroom--unpinned-top",
}
});
Bottom navbar position example:
// Bottom Navbars - Hide on Scroll
$(".navbar-hide-on-scroll.fixed-bottom").headroom({
"offset": 205,
"tolerance": 5,
"classes": {
// when element is initialised
initial : "headroom",
// when scrolling up
pinned : "headroom--pinned-bottom",
// when scrolling down
unpinned : "headroom--unpinned-bottom",
}
});
Modern Admin use PUG as template engine to generate pages and whole template quickly using node js, for getting start with PUG usage & template generating process please refer template documentation.
PUG Variables
This table contains required PUG variables to generate fixed navbar layout.
| Block | Variable | Datatype | Value | Description |
|---|---|---|---|---|
navbarConfig |
navbarPosition |
string |
'fixed-top' |
navbarConfig block has a navbarPosition variable, it contains navbar specific classes in that you
need to add 'fixed-top'. |
navbarConfig |
navbarHideOnScroll |
string |
boolean |
navbarConfig block has a navbarHideOnScroll variable, it contains navbar hide on scroll specific settings
in that you need to set true to enable it. |
verticalMenuConfig |
menuType |
string |
'menu-static' |
verticalMenuConfig block has a menuType variable, it contains navigation specific classes in that
you need to add 'menu-static' for vertical
layout. Hide on scroll support only static navigation. |
horizontalMenuConfig |
menuType |
string |
'menu-static' |
horizontalMenuConfig block has a menuType variable, it contains navigation specific classes in that
you need to add 'menu-static' for horizontal
layout. Hide on scroll support only static navigation. |
PUG Code
To set navbar hide on scroll on page or template, you need to use following PUG code.
-
Line no 20-22: Set navbar fixed class to
navbarConfigvariable value as'fixed-top'innavbarConfigblock. -
Line no 22: Set navbar hide on scroll setting to
navbarHideOnScrollvariable value astrueinnavbarConfigblock. -
Line no 24-25: Set navigation static class to
menuTypevariable value as'menu-static'inverticalMenuConfigblock. -
Line no 27-28: Set navigation static class to
menuTypevariable value as'navbar-static'inhorizontalMenuConfigblock. -
Line no 32-33:
contentblock has content section html file includedinclude ../contents/navbar-hide-on-scroll-top.html, which can be customizable on page level.
If you want to use this layout on page level you need to define it
on page it self. This template has one example pug file for fixed
navbar-hide-on-scroll-top.pug, however you can use
it on template level but it will generate whole template has a
navbar hide on scroll class.
block pageVars
- var pageTitle = "Hide on Scroll Top"
- var pageSubTitle = "Top navbar hide on page scroll"
- var description = "The hide on scroll option use to hide your fixed top navbar on page scroll."
- var activeMenu = "navbar-hide-on-scroll-top"
extends template
append navbarConfig
- var navbarPosition = "fixed-top"
- var navbarHideOnScroll = true
append verticalMenuConfig
- var menuType = "menu-static"
append horizontalMenuConfig
- var horizontalMenuType = "navbar-static"
append breadcrumbs
+breadcrumbs([{url:"index.html",name:"Home"},{url:"#",name:"Navbars"}, {name:"Hide on Scroll Top"}])
//- Include page content in page block
append content
include ../contents/navbar-hide-on-scroll-top.html
//- Vendor CSS
//------------------------------
//- Add Vendor specific CSS
append vendorcss
//- Page CSS
//------------------------------
//- Add custom page specific CSS
append pagecss
//- Vendor JS
//------------------------------
//- Add vendor specific JS
append vendorjs
//- Page JS
//------------------------------
//- Add custom page specific JS
append pagejs