Snippet: How to add a CSS class to Divi on scroll – with some real case examples

Divi is a fantastic tool for rapidly building websites that look and feel amazing, but sometimes there is just this one awesome thing you see on another website that Divi might not be capable of doing yet.

Enter jQuery. jQuery is a lightweight Javascript library included with every Divi install that helps simplify implementing common Javascript tasks with very little code. This coupled with some of the other Javascript libraries included with Divi, really opens the door to a ton of creative posibilities.

Don’t worry if this sounds complicated, in this post we are going to walk you through an overview of a piece of jQuery code, and then show you two examples of how you can start writing your own creative jQuery functions that are ready to wow your clients.

So, let’s start by taking a look at a few ways we can include jQuery code into our Divi website.

How to add some jQuery code to Divi

There are technically 3 ways to add jQuery code to Divi, but we will only be covering the 2 most common methods here but will mention the 3rd. The method you choose will depend on where you would like the code to run.

Divi Integration Tab

This is where you would add your jQuery code if you want it on every page throughout your website. An example of this might be if you wrote a function that changed the background color of your site header as the user scrolls through a page.

To find the Integration Tab you browse to your Divi Options page, then click on the Integration Tab. The code will be placed between open and closing <script> tags inside the <head> of your site.

Divi Theme Integration Tab

Divi Code Module

The code module is great when you are adding some jQuery that will only impact a single page on your site. The example we will cover is having fixed blurbs appear and disappear on screen as we scroll up and down a page. You can add the code module to any row on the page your want the jQuery to be executed on. Similar to the integration tab, this code needs to be placed between open and closing <script> tags inside the code module.

Divi Theme Code Module
Divi Theme Code Module Settings
NOTE: The third way to add some jQuery is to add your code to a Javascript JS file and adding it to your child theme. You would then also need to enqueue this script in your functions.php file. More on that in this article by the Elegant Themes team.

Quick overview of a jQuery function

Let’s take a look at some jQuery code that will add a class to an element once the user has started scrolling.

<script> </script>

These are always required to “open” and “close” any Javascript or jQuery code that you enter into either the Integration Tab or Code Module. It just tells the browser that you are about to write some code. The “type=“text/javascript” is just us telling the browser that this is Javascript code. This is required.

jQuery(document).ready(function( $ )

This basically means that our code will only run once the page Document Object Model (DOM) is ready for JavaScript code to execute. This is required.

function check_from_top_de()

Now we are getting to some actual custom code. This is where we create our function, the piece of code that will execute to do something cool on our site. We named our function check_from_top_de, because we are going to see how far the user has scrolled then do something, but you can name this whatever you want.

var scroll = $(window).scrollTop();

We have created a variable called scroll which gets assigned the distance that we have scrolled from the top of the page. This value gets returned in pixels which we can then use to apply some logic to add our class to our target selector.

if (scroll >= 300)

If the user has scrolled down the page 300 pixels or more

$("#your-target-element").addClass("class-to-be-added");

So first we point out (or select) which element we want the class to be added to, then we tell it the class name that we are adding. You would replace those with your own selectors and classes, but you get the idea.

else

If the user has not scrolled down 300 pixels or more, we want to do something else.

$("#your-target-element").removeClass("class-that-we-added");

We are going to remove the class we added if the user scrolls back up on the page.

check_from_top_de();

This runs our awesome function that we just coded as soon as the browser is ready to run code. Remember, we gave our function the name check_from_top_de, so enter your function name if you used a different one.

$(window).scroll(function()

If the user is busy scrolling, we also want to check how far they have scrolled, so we need to run our function as the user scrolls.

check_from_top_de();

Our function will be run if the user is detected scrolling on the page.

Are you feeling like a coder yet? You should, because this is some valuable information that will have you adding jQuery to your Divi site in no time. But now, how do we apply this practically on a site? Well, we are going to show you 2 applications of adding jQuery to Divi which should get your gears turning on other ways you can use this awesome new skill you have.

Practical applications of adding jQuery to your Divi site

Up next is two examples with code of using what we just learned to add some jQuery to your Divi site.

Changing the site header color on scroll

In this example, we wrote a function that changes the background color of our site header as the user scrolls through a page.

 

Preview:

Adding jQuery to Divi Example 1
Taking what we learned, we targeted the main header on our page, then changed the background color for that header once we have scrolled 300 pixels down the page. Since we want this to happen on all of the pages on our Divi site, we will add the code to the Integration Tab of the Divi Theme Options.

Take a look at the code below, then we will briefly cover what you need to do to add this to your site.

You can copy and paste the code above into the Integration Tab found inside your Divi Theme Options. Make sure to place it inside the <head> of your site.
$("#main-header").addClass("change-bg-color") This code is going to look for the #main-header element on our site and then add the class “change-bg-color” to that element. This CSS class is what will handle changing the color. You can call this class anything, just remember, it is good to use descriptive names.
$("#main-header").removeClass("change-bg-color") We want to restore the original color of the header when the user has scrolled up, so best to remove the class that changed the color.
With our jQuery code in place, we need to add a very tiny bit of CSS. Let’s take look at the code.
You can copy and paste the code above into the Custom CSS box found inside your Divi Theme Options.
.change-bg-color {
background-color: springGreen!important;
}
This code is pretty self-explanatory, we are just changing our background to “springGreen”. We added the !important operator to override any other colors assigned to the header background
Now when you save and reload your site, you should see the color changing when you scroll down and return to the original color when you are at the top of the page.

You can do so many other things by simply adding CSS classes to elements. This should really get the gears turning. With just one line of CSS we can even change the logo on scroll.

Add the following line of code below the CSS you just saved into the CSS box in your Divi Theme Options.

.change-bg-color #logo {
content: url('https://your-image-url/logo.png'
}
This single line of code will select the #logo in the element you added the .change-bg-color class to, in this case our #main-header. We then change the URL to that logo image to the one we want to display on scroll. Check out the awesome result below.
Divi jQuery logo swap
NOTE: Firefox can sometimes be temperamental with the CSS that changes the logo image. For a full-proof tutorial on how to change the header logo on scroll check out our article on How to change your logo on scroll in the Divi theme.

Making fixed blurb modules appear and disappear on scroll

For the second example we made some cool blurbs that fade in as you scroll over three fullwidth header modules, then fade out again as you scroll up.

 

Preview:

Adding jQuery to Divi Example 2
Here we used a code module because we are only adding the jQuery to this Divi page, so it would be unnecessary to add it throughout our entire site by using the Integration Tab. This example also uses Waypoint.js, a Javascript library that helps with triggering events as the user scrolls, which is also included in all Divi websites.

Take a look at the code below, then we will briefly cover what you need to do to add this to your site.

You can copy and paste the code above into a Code Module, but if you use this code exactly as is, you need to do a few things first.

 

    1. Add 4 modules/rows/section on the page that will trigger our waypoint code
    2. Add #start-top to the first element, and #module-one, #module-two, #module-three to the subsequent elements
    3. Create a 3-column row at the bottom of your page and add a blurb to each row
    4. Set the “position” setting for this row to “fixed” and “z-index” to “9”
    5. For the blurbs, give the first blurb assign #one, second #two, third #three and add “display: none;” to the “main element” box in the custom CSS
$('#module-one').waypoint(function() This is telling the Waypoint.js library which module we are watching for the scroll.
$('#one').fadeIn(); Here we are telling Waypoint.js that we want the element selected by #one to be faded in once #module-one has been scrolled into view.
{offset: '25%'}); Lastly, the offset checks how far we need to have scrolled from the top of the window to execute the code in our waypoint. This can be expressed in either a percentage or pixels. We went with 25%.

Conclusion

Adding jQuery to your Divi site is a powerful tool that now firmly sits on your belt. We only scratched the surface on what is possible when using jQuery and Divi together, but hopefully, this was helpful in showing what is possible. Keep an eye out, because we intend to release some more posts about adding features and effects to your Divi sites with the power of jQuery.

0 Comments

Submit a Comment

Explore more from Divi Engine

SPIN TO WIN

UPGRADE YOUR DISCOUNT!

  • Get ready to spin and win as we celebrate the Easter Holiday!
  • 1 spin per email
  • No cheating
Try Your Luck
Never
Remind later
No thanks