Can you believe this is done all with the tabs module and some custom code?

Planning

How we go about creating something like this

The insiration of the tutorial was taken from the Apple Airpods website. We are of course going to make something more simple as creating a site like theirs would require a lot more custom code.

The first thing we need to do is decide how we go about creating something like this. When thinking about how we would create something like this for you, we tried to come up with the most simpliest option with minimal coding… The tabs module came to mind. 

The tabs module has a navigation as well different tab content which we can utilise when scrolling. So the idea is to customise the Divi tabs module to show all the tabs content and then position them on top of each other using CSS – then as you scroll down, determine the position and show the respective tab and hide the rest.

Well this is the idea but hit a few snags along the way so was not as simple as first thought 😀

Setting Up Page

Lets get cracking.

All you really need to do in this step is to add the tabs module, however we have added sections above and below to show that you can scroll down to the tabs section and then do the magic and then carry on.

The things you need to make sure you do are:

• – Keep the tabs in 1 row in the section. Don’t add other rows etc.. We want only one.
• – Add a custom CSS class to the section, we added scroll-tabs as our class but you can add anything.

The next thing to think of is what content will go inside the tabs. You can do it 2 different ways.

1) Add the content in the tabs module that you want like text or html

or

2) If you want to something a little more fancy like we did you can utilise the Divi Library and insert a layout into the tabs. To do this you will need to do some extra work and add some PHP to your child theme or use a plugin called “Code Snippets” to add the PHP code.

Follow this tutorial on how to do this

Adding CSS

Changing the style and making it sticky.

The CSS we are adding is to make the tabs sticky, changing the height of the area to be bigger and other style preferences – see the code below

The main thing to focus on here is:

• Setting the height of the section manually (we could make some JS code to do this but could end up too complicated).
• Making the row sticky. This gives the section the impression that it is standing still and not moving.

Add a Code Module

Paste the Code below in the Code Box between opening and closing <style> tags

Save

Adding JavaScript

Making it all happen – the fun part 😁

Ok so now we have the CSS in place and the tabs are sticky – we now need to add some code to make it work out the distance scrolled from the top and then know which tab to show.

Our original idea was to utilise the jQuery.trigger('click') function. The idea was that as you scroll down, determine which tab should be shown and then mimic the clicking of the tabs navigation. It worked but there were issues with delay as you scroll and it not showing the tab until you finished scrolling.. It looked really buggy so we had to manually add the remove classes ourselves 🙃. This was not ideal as generated more code for us – but sometimes you have to do things the harder way to get it right!

So now comes to the maths – let’s get our thinking caps on!

We want to get some variables to work with – these are:

• Distance of the tabs from the top – So we can work out how far down the row is to calculate the scroll correctly
• Height of the tabs – We could manually set this from the value we add in the CSS, but using this means we only need to change it in one location.
• Number of tabs – Again, we could set manually – but prefer to get it automatically
• Single Tab Height – Assuming all the tabs are the same size – work out the height of one (height of tabs / number of tabs)

We have 5 tabs in our example – so now we need to do the calculation to work out the distance of the scroll from the top for each. We first need to work out the distance from the top to scroll for the first section. We work out the distance from the top and minus the window height as we need to factor in the physical space the window takes. Then we add the single tab height to get the final number. We then use this number and add the single tab height multiplied by the number the tab comes in the order.

• Tab 1 – (Distance of the tabs from the top – window height) + Single Tab Height
• Tab 2 – (Tab 1 number from above) + (Single Tab Height * 1)
• Tab 3 – (Tab 1 number from above) + (Single Tab Height * 2)
• Tab 4 – (Tab 1 number from above) + (Single Tab Height * 3)
• Tab 5 – (Tab 1 number from above) + (Single Tab Height * 4)

Still with me?

Now we need to determine the scroll position using jQuery(window).scrollTop(); and depending on the position to show or hide the tabs – for example if (scrollTop < (tab 1 number) { - we will show tab 1. See full code and explaination below.

Add a Code Module

Paste the Code below in the Code Box between opening and closing <script> tags

Save

Conclusion

If you made it this far, I thank you for your perseverance. Coding can be confusing and if you got lost a little be sure to comment below for help or try again and do it slowly.

We are going to do another tutorial on how to add some cool animations based on scroll too - so be sure to keep a look out for this! It should be fun.

Have a great day/week/month/year/life 😵 - we appreciate you all!