3 Ways To Change Logo On Scroll Using jQuery In Genesis Sample Theme

The code in this download folder contains 3 different methods which enable you to use jQuery with PHP to change your image on scroll or using any other condition.

The 2nd solution uses hard coded image URL’s within the jQuery to change the image and then add it back using pure jQuery.

The 1st & 3rd code snippets use the wp_localize_script() function which enables the efficient usage of PHP, in this case, a image from different sources, with your jQuery without hard coding the image HTML or URL’s within script tags in PHP or jQuery.

This way you can add a image via the customizer or add the image file directly to your child theme folder. The 3rd solution also returns the original custom logo without needing to add it back.

Demo Video

Shows what the code for solution 3 does. Adds a custom field to the customizer you can use to upload a 2nd logo which is displayed on scroll.

Tested using the Genesis Sample child theme by StudioPress however will work in any Genesis child theme. CSS class selectors for your logo may need editing in the jQuery when using older theme versions which don’t use the custom-logo built into Genesis.

Installation Steps

There’s 2 steps :

There’s 3 files for 3 different methods, scroll_1.js, scroll_2.js and scroll_3.js. Only upload one.

1. # Upload one of the js files to your child theme folder :

 


There’s 3 different functions for 3 methods, script_1, script_2 and script_3. Only copy & paste one.

2. # Copy & paste the PHP code for 1 method from the functions.php file to the end of your child themes functions.php file.

 


If using method 3, also copy & paste the PHP code for the genesis_customizer function.

Note: Solution 1 and 2 require swapping out the links in the .js file with links to your logo(s). Solution 1 also requires you to upload a image named no-scroll.png to your child theme folder. Solution 3 enables you to add your scroll logo via the customizer with a default image named scroll.png uploaded to your child theme folders root directory.

Download Folder