Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Small JavaScript snippet to make the Genesis site header stick to the top when scrolling down.
jQuery(function ($) {
$(window).scroll(function () {
var yPos = ($(window).scrollTop());
if (yPos > 200) { // show sticky menu after screen has scrolled down 200px from the top.
// add a custom class to the site header for custom styling.
$(".site-header").addClass("is-sticky");
// if you feel brave, switch logos (e.g. to match different background colors).
$("img.custom-logo").attr("src", "http://localhost/wp-content/path/to/sticky-logo.svg");
} else {
// Remove the class to show the non-sticky header design.
$(".site-header").removeClass("is-sticky");
// Revert to original logo.
$("img.custom-logo").attr("src", "http://localhost/wp-content/path/to/original-logo.svg");
}
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.