How to Make Sticky Ads with jQuery Effortlessly

How to Make Sticky Ads with jQuery Effortlessly

Sticky Ads are those that follows you when you are scrolling down a page. They bring great view-ability to the advertisement placed on the site, as visitors are tend to click on the sticky ads quite often.

These types of ads can be placed anywhere, like on sidebars or inside columns, on the website where they hold on their position regardless of scrolling.

In this tutorial I will explain you to effortlessly develop this Sticky Ads feature in your website.

Sticky Ads Work on all Websites

Sticky Ads work on every website – HTML, WordPress, PHP or any other.

Another tutorial which you will be interested to read is How to create jQuery Treeview with minimum codes.

How Sticky Ads Work

The concept here is to make a HTML div as sticky and inside it place the advertisements. This way the advertisements will become sticky.

This sticky div is always stuck inside it’s parent and never leaves it, even if you scroll down the page. It follows you until you scroll down to the bottom of its parent.

sticky ads diagram

For implementing this feature I will use Sticky Kit.

Sticky Kit

Sticky Kit is a jQuery plugin for creating sticky elements in the website. It allows you to apply stickiness to any HTML element (div, span, etc).

The Sticky Kit has an in-built function called stick_in_parent().

This function checks it’s (sticky element’s), parent’s height and then applies the stickiness for this entire height.

You can download the Sticky Kit from here.

Integrating Sticky Kit in Your Website

Follow the below 4 steps to make any div sticky by using this plugin.

  • Make the HTML structure of your web page like below:
    <div class="content">
        <div class="sidebar">
            This is a sticky column
        </div>
        <div class="main">
            This is the main column
        </div>
    </div>
    
    

    Note – The div having the CSS class as sidebar will be made sticky. It will be sticky for the height of it’s parent, (here div having the CSS class as content).

  • Put the JS file called jquery.sticky-kit.js in the website folder.
  • Add reference to jQuery and sticky kit JS on the page head.
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <script src="sticky-kit.js.download"></script>
    
    
  • Apply the stickiness to the given div.
    <script type="text/javascript">
        jQuery(document).ready(function ($) {
            $(".sidebar").stick_in_parent();
        });
    </script>
    
    

    Note – Here I applied stickiness to the div that has the CSS class called sidebar.

Make Multiple Columns Sticky Easily

If multiple elements have the sidebar class then stickiness is applied to all of them.

Sticky Div Implementation Issues and Solutions

Sometimes you may face problems in implementing Sticky Kit on your website due to the HTML structure of your web page. Therefore you have to apply a bit of hack to make it work.

Let’s discuss some of these situations.

1. You Don’t Want to Change HTML Structure of your Web Page

Stickiness is applied to the height of the element’s parent, so if your web page HTML structure is creating problems while applying the Sticky Kit, then you can just use a bit of jQuery to create a hack.

Take for example, you want to apply stickiness not based on height of the parent but on the height of some other column. Then you can do this with jQuery code given below:

$(".sidebarParent").height($(".otherColumn").height());
$(".sidebar").stick_in_parent();

Here .sidebarParent is the parent of .sidebar.

This will save your time as you don’t have change the web page HTML structure.

2. Apply Stickiness only on Tablets and Larger Screens

Apply jQuery’s if statement on the window width to do this trick.

if($(window).width() >= 768){
     $(".sidebar").stick_in_parent();
}

Apply Stickiness after a Few Seconds Delay

If the parent column is showing some stuffs that are coming from other website, either through jQuery AJAX method or some other way.

An example of this thing would be the DISQUS comment that loads after a few second.

These comments will increase the height of the parent element after a few seconds. So the Sticky div would not stick for the whole height of it’s parent.

To solve this you can call the stick_in_parent() function after a few seconds delay.

jQuery(document).ready(function($){
   setInterval(function(){ 
    stickyAds();   
   }, 3000);
   
   function stickyAds(){
    $(".sidebar").stick_in_parent();
   }
  });

Note – I used the setInterval function to call the function after 3 seconds delay. By this time I can hope that the AJAX data is received and shown on the div.

Sticky Ads Video

That’s all, this completes the Sticky Ads implementation. The demo and download links are below:

DEMO DOWNLOAD

Conclusion

Not just ads, use the Sticky Ads feature to make any column or multiple columns sticky. Sticky Ads will give you good revenues while showing advertisements in your website.

I hope this tutorial will helps you so please share this tutorial by using the share buttons given below.

More jQuery Tutorial

1. jQuery Validation of Email, Number, Checkbox and More
2. Check Uncheck All checkbox with jQuery
3. Creating jQuery Expand Collapse Panels In HTML

Share this article -

yogihosting

ABOUT THE AUTHOR

This article has been written by the Technical Staff of YogiHosting. Check out other articles on "ASP.NET Core, jQuery, EF Core, SEO, jQuery, HTML" and more.