How To Create Sticky Elements For WordPress Website Without Plugin

A Sticky Element is an element by which the user scrolls over a page on a Website and stays sticky on one of the elements on the page. It means that, if your visitor visits your Website page and scrolls down where he wants but some of the elements of your Website don’t move or stay on their position fixed. The content of your website as a sticky element will always be attractive and visible to visitors. So, it’s really good and flexible to have some sticky elements on your Website. Today I’m going to share with you How to Create sticky elements for WordPress Website without a plugin. 

A Sticky Elements increase the impression of some particular elements of your website. By using the Sticky Elements functionality you can make any content’s position fixed while your visitor scrolling down the page. It makes the content fixed on its position so the content will be visible all the time.

WordPress is a popular medium for easy website creation. You can customize your WordPress as you want. So, WebExtent works for making your WordPress life easier. We guide you through our blogs and videos on our youtube channel. So let’s start our today’s blog about How to create Sticky Elements for WordPress Website without a plugin.  

Live Demo: How To Create Sticky Elements for WordPress Website without a plugin.

Step 1: To create Sticky Elements for WordPress website without a plugin, firstly you have to create a file in your theme file. To do that open your theme files with a suitable code editor which you prefer.  Now create a new file here which must be a javascript file. So use the accurate extension (.js) to create the file.    

Enqueueing The File:

Step 2: After creating the file the second thing is enqueueing the file in the main functiion.php file. If you won’t enqueue the file which you’ve made a moment earlier, then it’ll not be workable. So make sure to enqueueing the file. To do that open the function.php file, now write how I write it. Write the code where the script files are enqueued. 

wp_enqueue_script( 'webextent-sticky-element', get_stylesheet_directory_uri() . '/sticky-element.js', array( 'jquery' ), '', true );

You have to add there a unique ID name and you have to write everything accurately as I wrote. Now save the file.

Applying JS for the Sticky Elements:

Step 3: Now open the file which you’ve created. Here you have to use some codes. Don’t worry I’m providing my own codes, you don’t need to write any codes. Here I used a lot of functionalities, if you need more extra functionality then you just have to edit how you want to do it. If you can’t edit this let me know about it. I’ll help you to get out of this. I made a live demo of how to create Sticky Elements for WordPress Website without a plugin. You can have a look at it. You can set your own style there also by using my codes. 

Notice: Here you must have a unique ID name of which elements you want to create Sticky Elements for WordPress website.

 
;(function($){
	$(document).ready( function(){
		let getHeader = $('header#site-header');
		if ( getHeader.length >  0 ) {
			$(window).scroll( function(){
			if ( $(window).scrollTop() > 10 ) {
				getHeader.css( {
				position: 'fixed',
				left: 0,
				top: 0,
				width: '100%'
			} );
			}else {
				getHeader.removeAttr('style');
			}
		} )
		}
	} );
}(jQuery))

If you face any problem with it, please feel free to share it with me. I’ll give you a solution. Stay connected with WebExtent. 

Related Blog: How to create a child theme and override the parent theme using it. 

Follow Us on Youtube

You can catch us on: 

Facebook: https://facebook.com/webextent.net/ 

Twitter: https://twitter.com/WebExtent 

Instagram: https://www.instagram.com/webextentofficial/ 

Regards. 

Tags: Create Sticky position Sticky Elements Sticky Position WordPress hacks WordPress Sticky Elements WordPress tips