In this article I am introducing how you will make smart sticky elements to the page when the user scrolls such that the element is always visible. See the video for live demo

Adding Sticky-Kit JQuery Plugin

For this kind of effect I used the sticky-kit jquery plugin which is available here. Download the master file, extract it and copy the “sticky-kit.min.js” file from dist folder. Now paste this file into your active theme’s js(case-sensitive) folder. If it  is not there, you will create one.

Create another new JS file sticky-kit-init.js and save into same folder. Here is the complete code of this JS file:

sticky-kit-init.js file

(function($){
	StickyElement = {
		init: function()
		{
			if( $(window).width() > 768 )
				$('.sticky-panel').stick_in_parent();

			$(window).on('resize', function(){
				if( $(window).width() > 768 )
					$('.sticky-panel').stick_in_parent();
			});
		}
	};

	$(function(){
		StickyElement.init();
		if( typeof FLBuilder !== 'undefined' )
		{
			FLBuilder.addHook( 'didPublishLayout', StickyElement.init);
			FLBuilder.addHook( 'didCancelDiscard', StickyElement.init);
			FLBuilder.addHook( 'previewLayout', StickyElement.init);
			FLBuilder.addHook( 'restartEditingSession', StickyElement.init);
			FLBuilder.addHook( 'endEditingSession', StickyElement.init);
		}
	});

})(jQuery);

Enqueue the JS files

Open the functions.php file of your active theme and add the following PHP snippets there:

Enqueue the JS files

add_action( 'wp_enqueue_scripts', 'probb_enqueue_sticky_kit_scripts' );
function probb_enqueue_sticky_kit_scripts()
{
	wp_enqueue_script( 'sticky-kit', get_stylesheet_directory_uri() . '/js/sticky-kit.min.js', array(), '12012017', true );
	wp_enqueue_script( 'sticky-kit-init', get_stylesheet_directory_uri() . '/js/sticky-kit-init.js', array(), '12012017', true );
}

Conditionally you can load these two js files. Assume that you are wanting this effect for single layout. So you can load them for that layout only. Assuming your page ID is 230. Then you can write this snippet

Enqueue the JS files at specific page(s)

add_action( 'wp_enqueue_scripts', 'probb_enqueue_sticky_kit_scripts' );
function probb_enqueue_sticky_kit_scripts()
{
	if( ! is_page( 230 ) )
		return;

	wp_enqueue_script( 'sticky-kit', get_stylesheet_directory_uri() . '/js/sticky-kit.min.js', array(), '12012017', true );
	wp_enqueue_script( 'sticky-kit-init', get_stylesheet_directory_uri() . '/js/sticky-kit-init.js', array(), '12012017', true );
}

Creating a Row with Beaver Builder

Creates a 2 columns row. Select the one of the column, click on the column settings link, go to Advanced and add “sticky-panel” text into class input text field. Save the column settings. You can add any module inside those two columns. As per demo I used the Gallery module for sticky element column and text editor module at other column.

When all will be completed, you will click on the Done ->Publish button and scroll the page. You will get same effect which I’m showing in the video.