07971 088 320 [email protected]

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 (1414 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!

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!