How To Create an On Scroll Header in Genesis

The design patterns change, so we should be able to customize our genesis theme.

If you want to create a fixed/sticky header on a scroll or want to create the header which on scroll changes the background color, you are at right place.

Today, in this short tutorial, we are going to learn how to create a sticky header in genesis parent/ child theme.

Create On Scroll Fixed/Sticky Header

The focus of our tutorial will be on JQuery and the code applies to the home page only. The jquery snippet isn’t too much longer, but a few lines of code. Let’s get started.

Step #1: First, we will create a file at the current themes js folder. If your theme doesn’t have a js folder, create one.

Inside js folder, you need to create a file named as onscroll.js. Inside it paste the following code.

jQuery(document).ready(function($) {
$(window).scroll(function() {
if ($(document).scrollTop() > 150) {
$('.home .site-header').addClass('shrink')
} else {
$('.home .site-header').removeClass('shrink')
}
})
})

jQuery(document).ready(function($) { 

$(window).scroll(function() { 

if ($(document).scrollTop() > 150) { 

$('.site-header').addClass('shrink') 

} else { 

$('.site-header').removeClass('shrink') 

}

 }) 

})

Step #2: Now we will add some CSS and header will begin to scroll and its color will change. Inside your theme, find style.css and add this snippet.

header.site-header.shrink {
background-color: white;
-webkit-animation-duration: .5s;
animation-duration: .5s;
-webkit-animation-name: slidedown;
animation-name: slidedown;
-webkit-animation-timing-function: cubic-bezier(.075,.82,.165,1);
animation-timing-function: cubic-bezier(.075,.82,.165,1);
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 9999;
padding: 0;
box-shadow: 0 2px 6px 0 rgba(0,0,0,.07);
background: #fff;
}
.home .site-header.shrink .genesis-nav-menu a {
color: black;
}
@media only screen and (max-width: 768px) {
.site-header.shrink {
display : none;
}
}

Above CSS code changes the header style. The position of header changes to fixed. Also, its background changes from transparent to white. I have added some animations to it.

Step #3: The last step is enqueueing a script on scroll.js. Navigate to the functions.php file add this code.

function websiteguider_script() {
wp_enqueue_script( 'custom-script', get_stylesheet_directory_uri() . '/js/onscroll.js', array( 'jquery' ) );
}
add_action( 'wp_enqueue_scripts', 'websiteguider_script' );

Now you have a scrolling header which changes its background color when scrolled.

Hope you loved this tutorial, if so please like, share and subscribe to our youtube channel.

Also, don’t forget to leave the suggestion.