How to Make Any Divi Page Element Sticky–Divi Nation Short

Posted on August 26, 2016 by in Divi Resources | 60 comments

How to Make Any Divi Page Element Sticky–Divi Nation Short

Welcome to Day 88 of our Divi 100 Marathon. Keep tuning in for 100 days in a row of awesome Divi resources as we count down to the amazing release of Divi 3.0 on the final day of the series!


Hello Divi Nation! Thanks for joining us for another episode of our Divi podcast and youtube show. This time around we’ll be sharing a handy tip on how to make any Divi page element “sticky”. If you’re not familiar with that term, it means fixing the item in place so that it stays in front of your site visitors as they scroll down the page. This is a great way to call attention to your desired call to action on any given page.

Let’s get into it!

How to Make Any Divi Page Element Sticky

In this episode of Divi Nation I’m going to show you step-by-step how to make any Divi page element sticky. This trick is easy to achieve but the steps are precise, so be sure to follow along closely and take note of the comments within the file directory strings and the code snippet below. If you have any questions, just put them in the comments section and we’ll do our best to help you out.

Subscribe To Our Youtube Channel

All Subscription Options:

Summary: How to Make Any Divi Page Element Sticky

For this tutorial we are going to be using a free Javascript plugin made specifically for creating sticky elements. To get it, go to http://stickyjs.com/ and download the plugin by clicking the orange “download plugin” button.

stickyjs-website

Unzip the the plugin file and open the folder. Locate the “jquery.sticky.js” file and move it to the following WordPress directory:

wp-content > themes > ACTIVE THEME FOLDER > js

So if they are using Divi without a child theme it should look like this:

wp-content > themes > Divi > js > jquery.sticky.js

If you are using a child theme it should look like this:

wp-content > themes > DIVI CHILD THEME FOLDER > js > jquery.sticky.js

If you do not have a “js” folder in your child theme already you don’t have to create one but it makes sense to. If you opt not to create a new folder called “js” then simply add the new file to the child theme folder and adjust the src link in the step below to accurately reflect your file string.

Note: Your WordPress files can be accessed using an FTP client and then logging into the server using your username and password. Alternatively you can use the cPanel provided by most web hosting companies to access your files.

divi-theme-options

Next, copy and paste the following code snippet under Divi > Theme Options > Integration > Add code to the < head > of your blog

<script src="http://YOUR-DOMAIN-HERE/wp-content/themes/YOUR-THEME-FOLDER-NAME-HERE/js/jquery.sticky.js"></script> <script>   jQuery(document).ready(function(){ jQuery("#sticker").sticky({topSpacing:200});
   });
</script>

Aside from getting the src link correct, the other important line of code in the snippet above is this one.

jQuery("#sticker").sticky({topSpacing:0});

What this line of code means is that any element you give the css class “sticky” to or the css id “sticker” to will become a sticky element. I recommend you use the “sticker” css id so that the same snippet can be used for many elements with custom css styles for each.

If you want more than one element to be sticky all you need to do is add another line directly below the original with a different css id.

jQuery("#sticker2").sticky({topSpacing:0});

With a few sticky elements added it will look like this.

<script src="http://YOUR-DOMAIN-HERE/wp-content/themes/YOUR-THEME-FOLDER-NAME-HERE/js/jquery.sticky.js"></script>
<script>
(function($) {
    $(document).ready(function() {
        function becomeSticky(el, padding) {
            if (el.length) {
                el.sticky({
                    topSpacing: padding
                });
            }
        }
        becomeSticky($("#sticker2"), 150);
        becomeSticky($("#sticker3"), 100);
    });
})(jQuery);
</script>

You can also change the “topSpacing” value to be whatever you want. For instance, I found that “150” was ideal for my sidebar module. You can play with it to get the value that works best for you.

css-class-id

Next, assign the “sticker” css id (or “sticker2”, “sticker3”, etc.) to whatever module(s) or page element(s) you want to be sticky. And of course you are free to change “sticker”, “sticker2”, and “sticker3” to whatever words you want your css id’s to be. Such as “#left-sidebar” or “#right-sidebar” or “#sticky-optin” etc. Just so long as it’s the same in the snippet and your module/page element.

preview

When you’re finished, click the “Save and Exit” button in the module or section settings and then preview the page.

Next Week On The Divi Nation Podcast: Josh Ronk Round 2!

Last Friday we had intended to interview our developer Josh Ronk, who has been leading the Divi 3.0 project. Instead, he needed more time to get the Divi 3.0 beta out to all of our beta testers–which, of course, took precedence. Next week we will try again and hopefully give you all some more information on what it takes to take something like Divi 3.0 from concept to completion.

Be sure to subscribe to our email newsletter and YouTube channel so that you never miss a big announcement, useful tip, or Divi freebie!

divi-2-6-logo

Divi 100 Day 88

The Countdown To Divi 3.0

This post is part of our Divi 100 marathon. Follow along as we post free Divi resources for 100 days in a row! This 100-day countdown will end with the game-changing release of Divi 3.0, including our brand new visual editor built from the ground up using React. Divi 3.0 will change the way you build websites with the Divi Builder forever!
Let the countdown begin.

Learn More About Divi 3.0


60 Comments

  1. Awesome, great post and so useful. Thanks !

  2. This is great if you want to place a menu at the bottom of the fold and have it sticky throughout the page. Great info! Thank you!

  3. Must be doing something wrong, it’s not working for me. First Sticky Section was sticky but behind the content rolling over, now it’s not working at all. Any hints?

    • I noticed there was a z-index change in the css, which will keep your section above the rest…

    • Nathan B. Weller

      Mark is correct. You will want to provide your sticky element’s main element with a z-index of 1. Then, apply a z-index of 0 to everything it is currently going behind upon scroll.

      Here is a helpful little tutorial on z-index and how to apply it: http://www.w3schools.com/cssref/pr_pos_z-index.asp

      Tip: make sure to give each element a position to activate it’s z-index.

      • Tried this, but still doesn’t work. I have added the z-index: 1; at the main element section of a sticky header I want to have. But it still goes behind every other elements. The code is still online at the website, so you can see it in action.

        It’s the last thing to fixed, all the other stuff was a perfectly clear instruction!

        • Nathan B. Weller

          Did you give each element a position? z-index only works on items that have a position.

  4. Nice! There is a straight WP plug-in ‘Sticky Menu (or Anything!) on Scroll’, which I’ve used successfully. Easy to implement, just a class to any module.

    • I feel like a plugin would be preferable than uploading a file into the theme directory. Thanks for the heads up on this one.

    • Hi Robin,
      Because you succeed please could you give us your example and publish the corresponding CSS code generated for the sticky element.
      Thank you.

  5. Oh yes!
    So good and exactly what I needed.

    One question, though:
    Is there a way to stop the “stickyness” after a certain amount of pixels and leave it there until the user scrolls up again?

    I got a sub-navigation inside a 50/50 layout and when I scroll to the bottom, the navigation dives under the following section.
    I would rather see it stop before reaching the end of its section.

    Any ideas?

    Oh and… you guys are THE BEST!
    No need for all that extra stuff and yet you give it to us… *kiss*

    Greetings, Eddie

    • Hi Eddie! I was looking for a solution and found this! Add:

      topSpacing:50, bottomSpacing:1200});

      And change the bottom value that matches your footer height.

      Hope it works for you 🙂

  6. thank you for useful tip !

  7. Love this tip! Know what guys. This one could become a build in divi feature… yeah?! 🙂 Cool either way!

  8. Great tutorial, I have been looking to integrate this type of functionality into my sites for sometime now. Keep up the nice work! Happy Friday everyone!

  9. Definitely keep this in mind for future use.

  10. Excellent demonstration and explanation! Thank you.

  11. It works on Extra has. Some plugins and extensions do not work in Extra

  12. I’m guessing that with the child theme, it needs to go into its own js folder?

    • Nathan B. Weller

      I personally think adding a js folder to your child theme is a good idea. It’s not absolutely necessary just to get it to work but if you add more js stuff in the future it keeps things better organized.

  13. do this work on mobile browser?

    • This was the first thing I was thinking about when I saw the video. The function should be deactivated on mobile devices.

  14. With you coming out with a new live editing tool within the Divi theme, shouldn’t I wait for this theme to be available? I am easily confused and I have no idea how to proceed or what to do. I will need step by step instructions. How will I get that? I am primarily interested in an interactive blog but it must be easy for me to do as my learning curve takes longer than most. How do I get help?

    • Nathan B. Weller

      Hi Elizabeth,

      All of these tutorials will still be valid when Divi 3.0 is released. Divi 3.0 is not a new theme, it is merely a major update to an existing theme. The big difference will be that once Divi 3.0 is released you will have the ability to edit your content using the new front-end editor.

      Here is a recent video of it in action: https://www.elegantthemes.com/blog/divi-resources/divi-3-0-video-sneak-peek-3-the-inline-editor-in-action

      Hope this helps.

      Best,

      Nathan

      P.S. we will have plenty of documentation on Divi 3.0 specifically too. So don’t worry about getting lost : )

  15. It’s not working for me either. Did everything to the letter.

  16. Was able to get it to work on a Page, but not on a Post, just as the title of this blog post says ‘Page Element’. Any way to get it to work on a Post

  17. This really helped me as I was looking for a way to do this last week and couldn’t find an easy one.

    I got todays tutorial working… BUT the sticky doesn’t stop scrolling and it covers my footer as well. How can I keep it contained? THANK YOU

    • The red panel: http://bit.ly/2c7vv78 is made sticky with sticky-kit.js.

      The scrips and use is similar:

      *script src=”http://nsxclubeurope.com/wp-content/themes/nsxclubeurope/js/sticky-kit.js”**/script*

      *script* jQuery(document).ready(function(){ jQuery(“#sticky_item”).stick_in_parent({offset_top: 150});
      });
      */script*

    • Hi Gaston! I was looking for a solution and found this! Add:

      topSpacing:50, bottomSpacing:1200});

      And change the bottom value that matches your footer height.

      Hope it works for you 🙂

  18. THANKS for this!
    How can I stop it from scrolling into my footer?

  19. this is the longest 100 days I have ever had to wait. OMG hurry up!

    • I think it’s great, it builds enthusiasm and has helped a lot of people get caught up with the divi builder that are new. – hold your horses!

  20. My clients will love this one, very useful will use it on many of our Doctor Micro websites.

  21. Hi,
    Sticky still under the content 🙁

    I don’t understand this with the z-index and position.

    Can someone explain this as if I were a 5 Year Old. The code where, when and how. it would be gold. I saw the z-index: 0; in the video, but it does not help.

    Thx for the post, it’s awesome. Just need to get the sticky infront of the content.

  22. Thanks for this.
    Sticky elements are something I’ve been using on my Divi site builds for about a year.

    The best plug-in / tool for the job that I’ve come accross is called Sticky Menu (or anything else)

    Very versatile and easy to use.
    I love the results and it’s provides a real wow factor for clients…

    • Would this work for a Footer as well? I want opt in bar to stay at the bottom of page.

  23. Just an stupid question because I’m a beginner. After installing this on the Divi folder, it will be lost after any upload? And has to be done again after uploading?

    (sorry about my English 😉

  24. Thank you much for this useful technique in making certain page elements sticky!

    On a related note, how can this or another technique best be applied to making the filter section of a filterable portfolio sticky?

    It would be nice to have the filters appear at the top of the page, beneath the header, as the user scrolls past a long portfolio. Thanks in advance for any and all tips!

  25. I’d like to give this a try but first have two questions:

    • The sticky.js file goes into the main theme folder – does it get blown away after a theme update?
    • Is this compatible with a sticky main menu?

    Thanks for this!

  26. With your sticky header functionality, it seems like having that applicable to any section would be a relatively simple function addition. It would certainly eliminate the headache of manipulating your header itself, which is probably the most limiting thing in Divi.

  27. Very nice!!
    But it doesn’t work. If I write the script in the code, some images are going to disappear (also the divi counter module disappiars, and the navigation bar on the top).

  28. Hi,
    Thank you for this very interesting post concerning sticky elements.
    I would like to use this great feature without using the DIVI builder.
    Please will it be possible to know the right CSS necessary to stick some elements according to sticker ID for example.
    Thank you.

  29. I just watched at your video and I didn’t try the code yet but if that works as shown you will be my HERO forever.
    Thank you so much for sharing.

  30. Hello and thanks for the tutorial. Just a minor note: Do not use the Divi Theme folder for the jquery.sticky.js file. Once the Divi theme gets updated the file is deleted and the function “mysteriously” stops working. Plus other JS code as well.

  31. More posts like this one should appear on this blog. Congratulations, it helped me a lot!

    Thanks! 🙂

  32. Unfortunately, this is not completely compatible with Divi… it makes the toggle module stop working. Took me a while of troubleshooting to figure out that this js was causing the issue. 🙁

  33. Hi guys,

    I spent half an hour checking and double checking all the steps, but I did not managed to get it working.
    I am using Divi 3.0 : )
    Any idea of what could be causing the problem??

    Looking forward to reading you!
    Cheers,
    pEdRO!

  34. hey, its not working. i wanted to make my menu sticky (full width menu module)
    it is giving my fullwidth menu module a parallax effect. it doesnt make it sticky.

    Please help

    • same here

  35. The same here after upgrading to divi 3.0 this sticky element does not work anymore.

  36. I have problem that the sticky js breaks my video embedding? I used both code modul or text modul and put in the embbed code of a youtube. The Video is show full with of a row instead of staying in the modul. Does anyone know a solution?

  37. I can only make it work when the modules that I don’t want “sticky” are set with a z index of -1. However, when I do that, any links or drop downs quit working.

  38. I think I have found the issue. I went back in the folder where “jquery.sticky.js” should be and it is missing. So try and re-upload “jquery.sticky.js” to the right folder and it should be working.

  39. How do I disable this function on mobile and tablet?

  40. Hi, I’m encountering some issues using this. There are times that the stickiness is delayed.. For example, once I scroll my browser, the sticky element did not stuck and just stayed at the top position of the page.
    But once I reached the bottom of my browser, suddenly the sticky element stuck then the stickness returns to normal.

    Can someone please help me with this

500,591 Customers Are Already Building Amazing Websites With Divi. Join The Most Empowered WordPress Community On The Web

We offer a 30 Day Money Back Guarantee, so joining is Risk-Free!

Sign Up Today

Pin It on Pinterest