Hide header in mkdocs-material when scrolling down

README.md

Quick tutorial on how to hide the header in mkdocs-material when scrolling down and let it reemerge when scrolling up. Because vertical space is scarce.

1. Download https://npmcdn.com/headroom.js/dist/headroom.min.js and put it into docs/javascripts/
2. Download activate_headroom.js and put it in the same folder
3. put into mkdocs.yaml

   extra_javascript:
     - 'javascripts/headroom.js'
     - 'javascripts/activate_headroom.js'

4. download extra.css and put it into docs/stylesheets/. Or add it the content if you already have this file.
5. put into mkdocs.yaml

   extra_css:
     - 'stylesheets/extra.css'

Optional: adjust values in activate_headroom.js.

Caveat: Header does not unhide when pressing s or f to search.

activate_headroom.js

document.addEventListener("DOMContentLoaded", function(event) {
    var headerElement = document.querySelector("header");

    var headroom = new Headroom(headerElement, {
      "offset": 205,
      "tolerance": {
          "up" : 40,
          "down" : 0
      },
      "classes": {
        "initial": "animated",
        "pinned": "slideDown",
        "unpinned": "slideUp"
      }
    });
    headroom.init();
});

extra.css

.animated {
    -webkit-animation-duration: .5s;
    -moz-animation-duration: .5s;
    -o-animation-duration: .5s;
    animation-duration: .5s;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both;
    will-change: transform, opacity
}

.animated.slideDown {
    -webkit-animation-name: slideDown;
    -moz-animation-name: slideDown;
    -o-animation-name: slideDown;
    animation-name: slideDown
}

.animated.slideUp {
    -webkit-animation-name: slideUp;
    -moz-animation-name: slideUp;
    -o-animation-name: slideUp;
    animation-name: slideUp
}

@-webkit-keyframes slideUp {
    0% {
        -webkit-transform: translateY(0)
    }
    100% {
        -webkit-transform: translateY(-100%)
    }
}

@-moz-keyframes slideUp {
    0% {
        -moz-transform: translateY(0)
    }
    100% {
        -moz-transform: translateY(-100%)
    }
}

@-o-keyframes slideUp {
    0% {
        -o-transform: translateY(0)
    }
    100% {
        -o-transform: translateY(-100%)
    }
}

@keyframes slideUp {
    0% {
        transform: translateY(0)
    }
    100% {
        transform: translateY(-100%)
    }
}

.animated.slideUp {
    -webkit-animation-name: slideUp;
    -moz-animation-name: slideUp;
    -o-animation-name: slideUp;
    animation-name: slideUp
}

@-webkit-keyframes slideDown {
    0% {
        -webkit-transform: translateY(-100%)
    }
    100% {
        -webkit-transform: translateY(0)
    }
}

@-moz-keyframes slideDown {
    0% {
        -moz-transform: translateY(-100%)
    }
    100% {
        -moz-transform: translateY(0)
    }
}

@-o-keyframes slideDown {
    0% {
        -o-transform: translateY(-100%)
    }
    100% {
        -o-transform: translateY(0)
    }
}

@keyframes slideDown {
    0% {
        transform: translateY(-100%)
    }
    100% {
        transform: translateY(0)
    }
}

.animated.slideDown {
    -webkit-animation-name: slideDown;
    -moz-animation-name: slideDown;
    -o-animation-name: slideDown;
    animation-name: slideDown
}