@louis-internet/fixed-header
v0.3.0
Published
Simple script to toggle classes after scrolled some pixels. Perfect to for fixed headers.
Downloads
20
Keywords
Readme
Fixed header
Simple script to toggle classes after scrolled some pixels. Perfect to for fixed headers.
Installation
Install from node
You can install fixed-header
using the npm package manager with ...
npm install @louis-internet/fixed-header
or if you prefer Yarn with ...
yarn add @louis-internet/fixed-header
Include Javascript files
<!-- From CDN -->
<script src="https://cdn.jsdelivr.net/npm/@louis-internet/[email protected]/dist/fixed-header.polyfilled.js"></script>
<!-- Downlaod from Github -->
<script src="dist/fixed-header.polyfilled.js"></script>
Usage
To use the Library simply call it an give it as first param the selector
<body>
<header class="js-header">...</header>
</body>
fixedHeader('.js-header', {
activeClass: 'toggle-class',
offset: 50,
})
You can also set some options
Options
activeClass
Default: 'is-fixed' Type: String
offset
After this scroll offset the class whould be triggert
Default: 0 Type: Integer
related
Toggle classes on additional Dom Nodes
Default: [] Type: Array
fixedHeader('js-header', {
related: [
{
obj: 'html',
activeClass: 'header--is-fixed',
},
],
})