Nuxt Headroom

Easy integration of Headroom.js within a Nuxt app.

Description

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.

This module is an extension for easy integration within a Nuxt web application.

Getting Started

Dependencies

• Nuxt 2.13+
• Nuxt > 2.10 || <= 2.12 requires @nuxt/components as dependency and added to buildModules

Installing

npm i --save-dev nuxt-headroom

• Add 'nuxt-headroom' dependancy to buildModules @ nuxt.config.js
• Auto-import of components must be set true @ nuxt.config.js

Usage

• How to run the program
• Step-by-step bullets

<template>
  <headroom>
    <header>Put your head code here...</header>
  </headroom>
</template>

Props

speed

Transition speed, in ms. Default: 350

easing

Transition function. Default: ease-in-out

disabled

Disable the headroom. Default: false

upTolerance

Scroll tolerance when scrolling up before component is pinned, in px. Default: 5

downTolerance

Scroll tolerance when scrolling down before component is pinned, in px. Default: 0

scroller

Element to listen to scroll events on. Default: () => window

classes

Css classes to apply. Default:

{
  // 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 scoll area
  bottom : "headroom--bottom",
  // when not at bottom of scroll area
  notBottom : "headroom--not-bottom"
}

offset

Height in px where the header should start and stop pinning. Default: 0

zIndex

The z-index of component. Default: 9999

footroom

Same behaviour but as a footer instead. Default: false

Events

pin

Callback when header is pinned.

unpin

Callback when header is unpinned.

unfix

Callback when header is unfixed.

top

Callback when above offset.

not-top

Callback when below offset.

bottom

Callback when at bottom of page.

not-bottom

Callback when moving away from bottom of page.

Authors

Contributors names and contact info

Martijn Wennekes @gmail

Version History

• 0.1
  • Initial Release

License

MIT License

Acknowledgments

• vue-headroom