Skip to content

Instantly share code, notes, and snippets.

@Kevin-LeMasters-PixelParade

Kevin-LeMasters-PixelParade/_auto_hide_reveal_header.md

Last active May 13, 2024 16:28
Show Gist options
  • Save Kevin-LeMasters-PixelParade/b7571eb3f598e11358e7db313bb6d356 to your computer and use it in GitHub Desktop.
Save Kevin-LeMasters-PixelParade/b7571eb3f598e11358e7db313bb6d356 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
_auto_hide_reveal_header.md

Header will need to be set to sticky and overlay by default.

Simply add this script to your global JS or enque as a seperate script file.

Raw
auto_hide_reveal_header.js
window.onscroll = function(e) {
var scrollY = window.pageYOffset || document.documentElement.scrollTop;
var header = document.querySelector('header');
var height = -header.clientHeight;
header.style.transition = 'transform 0.5s';
(scrollY <= Math.max(this.lastScroll, 300) || window.innerWidth <= 200 || this.loaded === undefined)
? header.style.transform = 'translateY(0px)'
: header.style.transform = 'translateY(' + height + 'px)';
this.lastScroll = scrollY;
this.loaded = true;
};
@A-Buzon
Copy link

A-Buzon commented May 13, 2024

Thank you again for sharing these snippets! I just happened to click on your profile and saw you're in Cinci! I'm up north of Columbus, closer to Cleveland, but still, also an Ohioan. Smallllllll world!

@Kevin-LeMasters-PixelParade
Copy link
Author

Thanks Abby, Small world. Check out some of Zach's gists, he has a great assortment of BB snippets. https://gist.github.com/zackpyle and he created this nice plugin for class management https://github.com/zackpyle/BBClassDropdown

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment