Contao StickyHeader

Install

$ npm install @oveleon/sticky-header

$ yarn add @oveleon/sticky-header

<script src="https://unpkg.com/@oveleon/sticky-header@latest/build/sticky-header.js"></script>
<link href="https://unpkg.com/@oveleon/sticky-header@latest/build/sticky-header.css" rel="stylesheet"></link>

Usage

import StickyHeader from "@oveleon/sticky-header"

// Use default css
// import "./node_modules/@oveleon/sticky-header/build/sticky-header.css"

new StickyHeader({
    // options ...
});

Options

JavaScript

{
    selector: 'header',             // Header or container selector
    linkSelector: 'a, strong'       // Default: null / Class selector for links (to change their colors when shrinking)
    scrollSettings: {
        startHeight: 100,           // Starting height for the container
        stopHeight: 50,             // StopHeight for the container after reaching the stopPosition
        stopPosition: 400,          // Container will shrink to stopHeight until reaching this position
        breakPosition: 600,         // Hide position
    },
    classes: {
        useClasses: false,          // Toggle classes on or off
        isOpen: 'sh-open',          // Visible and fully open
        onStop: 'sh-stop'           // stopHeight reached
    },
    logo: {
        autoScale: true,            // Logo within header or container should scale according to the current height
        selector: 'header .logo',   // Default: null / Logo selector
        maxHeight: null,            // Numerical value / maxHeight and minHeight for own scale-factor
        minHeight: null             // Numerical value
    },
    responsive: null,               // Responsive settings -> See below
    onInit: () => {},
    onPlay: () => {},
    onPause: () => {},
    onUpdate: () => {}              // onUpdate method with current scrollFactor (Check index.html for an example)
}

Responsive settings

Following parameters can be overwritten for different breakpoints. The option 'responsive' can be used as an object to pass new options.

Scroll settings

startHeight:    {numerical value}
stopHeight:     {numerical value}
stopPosition:   {numerical value}
breakPosition:  {numerical value}

Logo settings

logo: {
    maxHeight:  {numerical value}
    minHeight:  {numerical value}
}

#####Example for responsive settings

responsive: {
    768: {
        startHeight: 140,
        stopHeight: 100,
        stopPosition: 500,
        breakPosition: 800
    },
    1024: {
        startHeight: 180,
        stopHeight: 120,
        stopPosition: 600,
        breakPosition: 1200,
        logo: {
            maxHeight: 100,
            minHeight: 100
        }
    },
    1264: {
        startHeight: 220,
        stopHeight: 140,
        stopPosition: 700,
        breakPosition: 1400
    }
}

Stylesheet / SCSS

Sticky header delivers a ready-to-use mixin that can be used to apply styles. You can overwrite the default styles by using following variables within the mixin:

If link-selector isn't set, the mixin won't create styles for the link-selector transition and colors

@import "helper/sticky-header-mixin";

@include stickyheader(
  $start-background: rgba(75,90,170, 1),        // Start background on startHeight
  $stop-background: rgba(177, 190 ,255, 0.5),   // Stop background when reaching stopHeight

  $start-color: #ffffff,                        // Link color on startHeight
  $stop-color: #333333,                         // Link color on stopHeight

  $start-color-hover: #cccccc,                  // Link hover color on startHeight
  $stop-color-hover: #3366cc,                   // Link hover color on stopHeight

  $head-selector: 'header',                     // Sticky header selector
  $link-selector: 'a, strong'                   // Default: null / Link selector
)