Change Site Header CSS On Scroll

This tutorial provides the code which enables you to change the site header elements on scroll. You can determine the point where the change occurs simply by modifying the value in pixels. In this example, when you scroll down 250px, the background-color and site-title color change to black and white respectively.

Here’s the demo video to show you exactly what the code does:

Tested using the Minimum Pro child theme by StudioPress.

You can use this code in any theme which includes a fixed header. Simply swap out the site-header class with the class you want to modify for any element in any theme.

Here’s the code for logged in members: