12% off of LTD using this coupon: TWELVEPERCENTOFF. Promo ends on 2 Dec midnight UTC.
Published on Feb 14, 2020

Content Scroller in Oxygen

Sridhar Katakam

Updated on April 10, 2021

In WPDevDesign's Facebook group a user asks:

I've seen this nice effect on a beaver builder module demo and was wondering if something similar is possible within Oxygen.


The image background on the left is pinned and then replaced once the content on the right has scrolled to the next article.

This members-only tutorial provides the steps to use Waypoints to detect when divs (positioned right) come into view and change the URL of background image of a sticky div on the left with the data-attribute value of the div in Oxygen.

We shall use the built-in feature of Oxygen to set data-background attribute for the Div elements.

Step 1 - Load Waypoints

Install and activate My Custom Functionality plugin.

Connect to your hosting account using a FTP client and navigate to site's /wp-content/plugins/my-custom-functionality-master.

Upload jquery.waypoints.min.js to the plugin's assets/js directory.

Edit plugin.php and add the following inside the custom_enqueue_files() function:

This is a premium members-only content.

To view the rest of the content, please sign up for membership ($47/month or $599 one-time).

Already a member? Log in below or here.