0.6.0 • Published 1 year ago
@oveleon/sticky-header v0.6.0
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
)