The Ultimate Divi Bundle - 5 Divi plugins. 1 great price.
Learn More

The Divi Theme’s header shrinks to a more compact view as you start to scroll down the screen. Geno asked a question over on the Divi users group about whether it was possible to change the header shrinking effect to happen further down the page – e.g. a user would have to scroll down 500px before the header shrinks.

It turns out that Divi uses the jQuery Waypoints plugin to trigger the shrinking effect. Basically the main header is registered as a “waypoint” and when the use scrolls past it a function is triggered which adds (or removes) the CSS class which defines the sticky header layout.

Normally the waypoint triggers when the top of the element is level with the top of the viewing area. However, the waypoint definition accepts an “offset” parameter which allows you to specify that the trigger happens when the top of the element is a certain number of pixels from the top of the viewport. A negative offset will cause the trigger to happen when the element has already scrolled past the top of the viewport by the specified amount.

It was possible to add a custom offset in the Divi Theme’s custom.js file which achieved the desired effect. But was it possible to achieve the affect without modifying the theme files – i.e. with something we could place in a child theme?

As far as I can tell, the Waypoint API doesn’t offer a way for modifying existing waypoints. The best I could do was to remove all waypoints from the header element (as far as I can tell it’s the only waypoint), and create a new waypoint that works in the same way, but uses our custom waypoint.

Here’s the jQuery to achieve this (just change the -500 to your required offset in pixels):

jQuery(function($) {
    function update_header_waypoint() {
        $('#main-content').waypoint('destroy');
        $('body').waypoint({
            offset: -500 - ($('#wpadminbar').length?$('#wpadminbar').innerHeight():0), 
            handler : function(d) {
                $('#main-header').toggleClass('et-fixed-header',(d==='down'));
            }
        });				
    }
    setTimeout(update_header_waypoint, 1000);
});

To let us set the header to trigger at an exact number of pixels from the top of the page, I’ve re-attached the new waypoint instead of the main content, and have included an adjustment for when the WordPress admin bar is present (so that it looks the same to both the developer and the users).

The code waits until 1 second after the dom is loaded, to give Divi time to create the waypoint in the first place.