Add a class to site header when the page scrolls below marker. Remove the class when the page scrolls above marker.

ScrollShrink.js

/**
 * Add a class to site header when the page scrolls below marker. Remove the
 * class when the page scrolls above marker.
 */

// jshint esversion: 6
window.addEventListener("scroll", event => {
    "use strict";

    event.preventDefault();

    let distanceY = window.pageYOffset || document.documentElement.scrollTop;
    let siteHeader = document.querySelector("#MyHeaderElement");
    let marker = 300;

    if (distanceY > marker) {
        siteHeader.classList.add("smaller");
    } else if (siteHeader.classList.contains("smaller")) {
        siteHeader.classList.remove("smaller");
    }
});

/* <> */