Simple script to toggle classes after scrolled some pixels. Perfect to for fixed headers.
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
<!-- 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>
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
Default: 'is-fixed' Type: String
After this scroll offset the class whould be triggert
Default: 0 Type: Integer
Toggle classes on additional Dom Nodes
Default: [] Type: Array
fixedHeader('js-header', {
related: [
{
obj: 'html',
activeClass: 'header--is-fixed',
},
],
})