On Wednesday the 20th of June, Divi Space hosted a Facebook Live session showing how to stick almost anything, anywhere with jQuery. Having content stick or unstick on scroll is a common request. This webinar walks you through accomplishing it with jQuery instead of a plugin.
If you missed the Facebook live, you can rewatch it at any time!
https://www.facebook.com/wpzoneco/videos/1776556792392453/
There are lots of different ways to make content stick to a certain part of the window on scroll. This webinar shows how to use waypoints.js, a utility of Divi, to stick an action bar (CTA) to the top of the screen until we reach a chosen point on the page where it will unstick.
To set up you will need to give the action bar a class (sticky-bar) and give the section where you want the item to unstick a class (unfix). SJ demonstrates this with the Google Chrome console. The CSS portion of your code goes in the Custom CSS section of Divi Theme Options. The jQuery code goes in the <head> section in the integration tab if you want it to run on every page. If you just want it to run on certain pages then place the code within a code module on the individual pages you want it to run on.
The first thing to do is open a jQuery document ready function. This allows you to use shorthand within jQuery.
You’ll create a waypoint function that targets the sticky-bar. The waypoint function detects where you are on the screen or where a certain element is. The waypoint function is triggered by default when the element reaches the top of the screen, but you can create an offset that triggers it at a different place if you want.
Next, you’ll define what you want to happen when the element is triggered. In the example, SJ is toggling the fix command on and off. This is the command that sticks it to the top of the page.
You’ll need to make some adjustments to get the best appearance of the sticky bar. In the example you need to correct the overlap between the WordPress admin menu and the action bar. If it was always going to be viewed at the same resolution and screen size you could just look up the attributes and set those attributes in the style bar. Since that isn’t always going to be the case you need to add some code inside the jQuery function but outside the waypoint function.
A few lines of code create a dynamic element that not only sticks to the top of the page is but knows where the top of the page is. This means that page customization by the website owner or the end user won’t break your code. You’ll also need an if-else statement within the waypoint function to reset the margins to 0 when scrolling past the element upward to keep everything looking nice.
Next we deal with not wanting the action bar to appear for the entire length of the page, in case you have a different call to action or a section that needs special attention. A quick copy and paste of your waypoint function, removal of any code that’s not necessary, and changing sticky-bar to unfix is all that’s needed.
There are lots of different ways to make elements of your site sticky but SJ has found this method works the most consistently well with Divi’s sections. Clients frequently ask web builders for this feature, especially for their sidebars so they don’t contain whitespace for 70% of the page.
Once the commented code that goes with this episode is posted to SJ’s GitHub account we’ll paste it here.
If you have any topic ideas for future webinars be sure to leave them in the comments or send an email to [email protected] and SJ and David will do their best to handle them.
If you loved the content of the webinar and loved learning from SJ, then have a look at our online course! Now in its second enrollment of the Transforming Divi with CSS & jQuery Course will start June 15th. You can register now.
Here is a sneak peek of whats included in the course:
- Private Facebook Group
- Introduction to CSS
- Introduction to jQuery
- Five real-world examples where custom CSS has been used to make Divi better
- The jQuery Cheat Sheet
- Moving & Replacing with jQuery
- Preparing a child theme for jQuery & CSS
- Bonus: Inserting Layouts in Template Pages
- Bonus: Editing Modules
For more information about the Transforming Divi with CSS and jQuery course, read this blog post or sign up now!
Thanks for the nice wrap-up Randy.
I really liked SJ’s demo on this for the same reason I thought the recent course was very useful. You get a chance to see how a real developer troubleshoots when things don’t go exactly as planned and how the problem solving process comes into play. I was wondering when the code used was going to be available so I could play a bit more. Any ETA?
Yes, Trying to follow the blurry Facebook video and it’s difficult to actually read the code so posting it into this post would be helpful. Is there any way to embed a higher quality video? I know the live Zoom is pretty good but I was away for two weeks and can’t always watch the webinars live.
I also had a small issue getting the data-fixed-height-onload attribute to return anything but undefined. fixed_header_onload did give me a value, funnily enough? I managed to hardcode a value instead but it would be better to dynamically set the value.