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 Oxygen Attributes plugin to add the data-background field in the Oxygen editor for 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 $399 one-time).

Already a member? Log in below or here.

Need help implementing a tutorial in your site or want to hire me for custom work?


Find the article helpful and wish to donate?



You need to be logged in to view and post comments.
Not a member yet? Join here.
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram
%d bloggers like this: