OK, so I have it working to a state I’m happy with. It was pretty straight forward to be honest. The js code is nicely laid out and easy to read.
For anyone else trying to do this, copy the scripts-global.js file with the same path to the child theme folder, as described above.
When I opened up the file, there’s a clear contents that shows that the code dealing with the site header is in section 20. Once there, it is labelled as the sticky header.
As I understand it, this is a function that is called when the scroll position is changed. When this happens, there are 2 variable loaded in, which are the current scroll position and the height of the header.
Once loaded, there’s an if statement that checks to see if the scrolled position is more than 3 X the height of the header. If this is true then a call to remove a class called hide-sticky-header and add a class called sticky-header.
After that there is an else if that checks whether the scroll position is above that 3 X the header height position and if so, remove the sticky-header class. I guess this is if the user scrolls up the page towards the top.
There is another else that includes every other situation, which I guess is when the page is right at the top, in which case remove both the classes, as the header is in the position it needs to be anyway.
What I wanted was just for the sticky-header to be true the whole time. To do this I simply commented out the first if condition, so change this line:
if ( $documentScrollTop >= ( 1 * $headerHeight ) ) {
to
//if ( $documentScrollTop >= ( 1 * $headerHeight ) ) {
then I also needed to comment out all the other conditions like this:
/**
} else if ( $documentScrollTop < ( 1 * $headerHeight ) && $documentScrollTop > ( 1 * $headerHeight ) ) {
$( 'body.sticky-header' )
.removeClass( 'sticky-header' )
.addClass( 'hide-sticky-header' );
} else {
$( 'body' )
.removeClass( 'sticky-header hide-sticky-header' );
}
*/
At this point it sort of worked, but it seemed that adding the sticky-header class created an animated scroll down effect for the header that happened as soon as you started scrolling. This looks OK when you’re making the header sticky after it is out of the frame, but looks glitchy when you first start scrolling.
To fix this, I changed when this function was called. Originally it happens when you scroll down the page and the code looked like this:
.on( 'scroll', function() {
but I changed it to
.on( 'load', function() {
and now it does it’s animated drop down thing when the page first loads and it looks OK.
Thanks a lot for the theme Oliver and thanks for the pointer of how to make the changes, it was pretty straightforward to do.
