Totem module: Top bar
Totem Module for displaying a sticky header
This module is created for Totem projects but can also be used in any other Twig related project.
Installation
Install totem.module.top-bar with npm (we assume you have pre-installed node.js).
$ npm install totem.module.top-bar --save
Setup
Import all stylesheets within ITCSS order from your project stylesheet:
;;;;;;;;;;
Next you must import jQuery before you can init the top bar module. You can use the following example if your working withing a Totem project*:
var $ = ; //Require jQuery from Node with BrowserifywindowjQuery = $; // Define the jQuery namespace as a global variable. ; //Require jQuery from Node with Browserify
- Since we're requiring the above dependencies with Browserify you should only include the above example.
CSS Options
You can enable/disable certain settings from stylesheets/settings/_settings.top-bar-features.scss:
;
is-sticky
By default, the top bar element will stick to the top of the viewport by using position: absolute. You can change this behaviour by changing the key is-sticky within the $top-bar-features Sass map.
can-autohide
By default, the top bar element will autohide when the scrolk position of the viewport is greater than the vertical position & outerheight of the top bar. You can change this behaviour by changing the key can-autohide within the $top-bar-features Sass map.
can-peek
By default, the top bar element will show when scrolling upwards after it faded out. You can change this behaviour by changing the key can-peek within the $top-bar-features Sass map.
JS Options
Custom push element
By default, the top bar script will generate a push element so it won't overlap any content. You can define a custom element that will be used as push element.
;
Custom trigger position
By default, the top bar will trigger some classes based on the viewports scroll position:
- Small - Uses the class: .js__top-bar--small to the top bar wich can be used for styling purposes. This class will be added if the viewports scrolltop is higher than the top bar element position + outerheight
- Autohide - Uses the class: .js__top-bar--autohide to hide the top bar element. This class will be added if the viewports scrolltop is higher than the top bar element position + (outerheight * times 2).
You can adjust the trigger position by defining a custom trigger element
;
Styling
This module only offers some base styling (e.g. autodhide & sticky position). Any other styles should be defined from any child element within the top bar.