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.