Skip to content

Simple script to toggle classes after scrolled some pixels. Perfect to for fixed headers.

Notifications You must be signed in to change notification settings

LOUISINTERNET/fixed-header

Repository files navigation

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',
    },
  ],
})

About

Simple script to toggle classes after scrolled some pixels. Perfect to for fixed headers.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published