ScrollUpRevealHeader

Description

When scrolling down, the header scrolls away and the subnav scrolls to the top and is then fixed. When scrolling up, the header scrolls down and then sticks to the top and the sub nav scrolls down as it is fixed to the bottom of the header.

The subnav is optional and will work with just the header if no subnav is provided.

A mobile-first or desktop-first breakpoint can be set to limit the application of this module.

Prerequisites

• Sass: This module contains a .scss file that needs to be imported and compiled with your other scss partials.
• ES6: This module uses ES6 javascript and requires that the user imports the main file to be compiled into javascript.
• jQuery

Example

Codepen

Usage

Javascript Import:

import ScrollUpRevealHeader from 'scroll-up-reveal-header';

Javascript Usage: The direction can be either 'up' or 'down' and affects the breakpoint direction.

new ScrollUpRevealHeader({
  'header': $('header.main-header'),
  'subnav': $('.sub-nav'),
  'breakpoint': 1200,
  'direction': 'up'
});

Sass Import (includes 2 mixins):

@import "~scroll-up-reveal-header/dist/scroll-up-reveal-header";

Sass Usage: Each mixin takes a breakpoint and direction parameter

header.main-header {
  @include surh-header(1200, 'up');
}

.sub-nav {
  @include surh-subnav(1200, 'up');
}

Notes

• The default breakpoint is 1200px.
• The default direction is 'up'.
• Make sure the breakpoint/direction parameters for js and scss mixins match.