import React from 'react'; import PropTypes from 'prop-types'; const elClassHidden = 'header--hidden'; const elClassBackground = 'header--background'; export default class Header extends React.Component { constructor(props) { super(props); this.dHeight = 0; this.wHeight = 0; this.wScrollCurrent = 0; this.wScrollBefore = 0; this.wScrollDiff = 0; this.header = React.createRef(); } componentDidMount() { const header = this.header.current; window.addEventListener('scroll', this.throttle(250, () => { this.dHeight = document.body.offsetHeight; this.wHeight = window.innerHeight; this.wScrollCurrent = window.pageYOffset; this.wScrollDiff = this.wScrollBefore - this.wScrollCurrent; if (this.wScrollCurrent <= 0) { // scrolled to the very top; element sticks to the top header.classList.remove(elClassHidden); header.classList.remove(elClassBackground); } else if (this.wScrollDiff > 0 && header.classList.contains(elClassHidden)) { // scrolled up; element slides in header.classList.remove(elClassHidden); header.classList.add(elClassBackground); } else if (this.wScrollDiff < 0) { // scrolled down if (this.wScrollCurrent + this.wHeight >= this.dHeight && header.classList.contains(elClassHidden)) { // scrolled to the very bottom; element slides in header.classList.remove(elClassHidden); header.classList.add(elClassBackground); } else { // scrolled down; element slides out header.classList.add(elClassHidden); } } this.wScrollBefore = this.wScrollCurrent; }), { passive: true }); } throttle(delay, fn) { var last, deferTimer; return function () { var context = this, args = arguments, now = +new Date; if (last && now < last + delay) { clearTimeout(deferTimer); deferTimer = setTimeout( function () { last = now; fn.apply(context, args); }, delay); } else { last = now; fn.apply(context, args); } }; } render() { return (
{this.props.children}
); } } Header.propTypes = { children: PropTypes.node };