How to Make Sticky Ads with jQuery Effortlessly

How to Make Sticky Ads with jQuery Effortlessly

Sticky Ads are those that follows you when 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 how to effortlessly develop the Sticky Ads feature in your website.

Sticky Ads Work on all Websites

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

How Sticky Ads Work

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

This sticky div is always stuck inside its 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 its (sticky element’s), parent’s height and then applies the stickiness for this 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 with CSS class as sidebar will be made sticky. It will be sticky for the height of its parent, (here div having CSS class as content).

  • Put the downloaded file jquery.sticky-kit.js in the website folder.
  • Add reference of jQuery and sticky kit file 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 sidebar CSS class.

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.

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 other column. Then you can do like this:

$(".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.

Apply Stickiness only on Tablets and Larger Screens

Apply jQuery 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, through jQuery AJAX method.

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 after a few seconds and so the Sticky div would not stick for the whole height of its 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 – We used setInterval function to call the function after 3 seconds delay. By this time we 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.

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 results 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 "WordPress, SEO, jQuery, HTML" and more.