elementor4fun-logo
Last update: August 6, 2018

How to make any element sticky

Right now, with Oxygen 2.0, only the menu can be sticky.

How about to make any page element to be sticky as well, like this image ?

Step 1

Go to this page and download the compressed version of the file : http://leafo.net/sticky-kit/

Step 2

Add the JS to your enqueue files :

wp_enqueue_script( 'sticky-js', plugin_dir_url( __FILE__ ) . 'assets/js/jquery.sticky-kit.min.js', array('jquery'),'', false);

Step 3

Now just add this code to the element you want to be sticky. It can be a section, a div, an image...

(function($) {
  $('#%%ELEMENT_ID%%').stick_in_parent();
}(jQuery));

You can specify which parent the element will be stick to. For an image :

(function($) {
  $('#%%ELEMENT_ID%%').stick_in_parent({parent:'body'});
}(jQuery));

The element must be inside a section or a div.

Example with an image : I put the image inside a DIV, then I select the Image and I add the code :

When the element is sticky, the "is_stuck" class is added to it.

So we can add some CSS :

img.is_stuck {
	opacity:0.7;
	transition:1s ease opacity;
}

Check the Fullscreen sticky page for a better example : https://oxygen4fun.supadezign.com/fullscreen-sticky-page/

closealign-justifychevron-downcaret-up