Divi Sticky Sections – Free Plugin!

April 8, 2017 | Divi, FREE!, Plugins, Wordpress | 8 comments

Hi all… a little Saturday freebie for you all today. I had been asked by a client to see if I can get a cascading effect to work with a Divi site. So a section will show on your site and as you scroll it pins itself to the top of the screen.. then as you scroll further it is overlaid by the next sticky section and so on… This may already be doable in some other plugin but for a bit of fun I had a Google around and came across a JS polyfill plugin which makes the CSS for ‘position: sticky’ cross browser compatible (I’ve not idea about IE support.. but then who cares!). I did some testing and built it into a little WordPress plugin as a proof of concept but actually it’s fully functional and works very well. A nice feature for anyone that wants it on their site.

I’ve made a short video to explain what effect this gives and how to use it

Usage

Install this just as you would any other plugin. On activation, the plugin simply adds a CSS file and a JS file to your site. All you need do is add two classes to any Divi Section to make it work, one to activate the sticky control and another to define the screen sizes at which it operates.

The main class you need to add is ‘fixedsticky’ and the screen size dependent triggers are as follows:

  • fixedsticky_desktop
  • fixedsticky_tablet
  • fixedsticky_mobile
  • fixedsticky_all

The first three are for specific screen sizes (Desktop recommended for normal use) but the final one ‘fixedsticky_all’ basically means it’s always on regardless of screen size.

Screenshot Example

Download


Divi Sticky Sections (2541 downloads)

Inspiration

This plugin is a Divi plugin packaged version of the Fixed Sticky GitHub project by filamentgroup. Please see the original project here. The code in the CSS and JS they provide in their project is untouched. The examples on the GitHub project site will also work so you can use this little plugin for fixed headers, footers and anything else you’d like.

Caveats

Some things you need to know here… If you have only one section set as sticky then what happens is that any non-sticky sections will fall behind it on scroll.. it’s called sticky for a reason! I had envisaged this on a page where every section uses the functionality but you do need to add the class manually to each section. If you wanted it to be automatically turned on sitewide then you could perhaps use this experimental CSS in your child theme CSS or Divi Theme Options Custom CSS control:

.et_pb_section {
    position: -webkit-sticky;
    position: -moz-sticky;
    position: -ms-sticky;
    position: -o-sticky;
    position: sticky;
}

@media screen and (min-width: 981px) {
	.et_pb_section { top: 0; }
}

A Donate Button!

8 Comments

  1. haedworm

    Thanks again for this Sean, much appreciated. Personally for the usage I have in mind the caveat is exactly what I needed so it’s not really a caveat at all for me. Awesome.

    Reply
  2. Will MacQuinn

    Absolutely love this! Can this be applied to a module and not an entire section?

    Reply
    • Sean Barton

      Technically yes. I hadn’t thought to do that. Would work well in sidebars perhaps etc

      Reply
  3. Al

    Thanks, love all your solution, clever and functional.

    Reply
  4. Brett

    Brilliant – This is the only plugin I have found to work! I am wondering though, can this be altered to work on one row inside a divi section? I only want one side to move rather than the entire section…

    Reply
  5. Nick James Lomax

    Great Plugin…

    If this could work on modules, sidebars etc that would be really cool!

    Reply
  6. Muks999

    hi.Thanks! and what about sticky modul? Could i use it for module?

    Reply

Leave a Reply

Divi United

About this site and Sean Barton

Picture of Sean
Sean Barton is a Freelance PHP Website Developer in Crewe, Cheshire. He is a Wordpress and CMS/Framework specialist.
This site was set up in 2008 as a tutorial and scripting resource for the PHP language and Wordpress.
Find out more about Sean on the About Me page or use the Hire Me page to get in touch. For more information about Sean's work take a look at the Portfolio

Our Services

  • Wordpress plugin/theme development
  • Divi specialist
  • Ecommerce (Woocommerce, WPSC, Shopify, Magento)
  • PSD to Wordpress theme conversion (Responsive)
  • Website design work (Banners, Logos, Full Site, etc)
  • Website analysis (security, usability, SEO)
  • API Integrations (InfusionSoft, SalesForce, Ontraport, Customer Thermometer, etc..)
  • Wordpress consultancy & expert advice
  • Crisis support
  • Website hosting

The main services offered are Wordpress based although we do a great deal of technical programming for bespoke systems. From troubleshooting, extending frameworks, finding bugs to writing them from scratch.

Find out more by looking through our past projects or get a quote.

Be the first to hear about new products/updates!

This is a mailing list for those people interested in being told when we release a new product (Divi plugin or Theme).

We shall also use this list to let you know about product updates and releases.

You have Successfully Subscribed!