This tutorial provides the code which enables you to switch logos on scroll in any Genesis child theme. Tested on the Genesis Sample child theme and may need tweaking on other themes.
The code also creates a fixed header and overlaps the image over the bottom edge of the site header.
Update – Here’s a newer solution which changes the size of the same image on scroll
Here’s the demo video :
There’s 4 simple steps to follow:
- Using a code editor, copy & paste PHP code to the end of your child themes functions .php file.
- Using a code editor, create a new file named scroll-logo.js in your child themes js folder. Create a js folder if your child themes doesn’t already include one.
- Add CSS to your child themes style.css file
- Upload 2 logos to your child themes images folder making sure both file names and extensions match whats in the PHP code.
I’m using this as well as the script for changing the background color on scroll, but the change of the image seems jumpy. At one point it seems like the larger version and the smaller version of the image are both showing up at the same time. I was wondering if there is a way to do this without using two images, but rather using the same image but just shrinking the size. Perhaps you already have a tutorial for that? Here is the page in question:
https://macdaddysnc.com/
Thank you!
What size are your images and what theme are you using?
New tutorial https://wpsites.net/web-design/change-logo-size-on-scroll/