Making an ad unit sticky

Description

A sticky ad is used to acquire more view-ability. This is done by allowing the ad to scroll with the page

We can see the sticky code in action by scrolling down on this page. As you can see, as you start to scroll the unit on the right hand side scrolls with you. Ensuring that the unit is always visible to the user.

There are many ways to implement sticky adunits on your site. However, You can view the page source to see how it was done, or view the implementation guide below.

Implementation Guide

prerequisites

  • Fuse tags received from Publift
  • Fuse tags implemented on page
  • Ads displaying on page

 

To Implement sticky, I will teach you a very simple implementation,

Note: This may not work for all sites. 

We need to start off by identifying the adunit we want to be sticky. 

To do this, give the div and Id

<div id="stickyad" data-fuse="21689884288"></div>

I gave the div an ID of "stickyad", we will be using this in the javascript we write shortly. 

 

Now start a new <script> section on your page. 

start off by calling the "$(document).ready" function: 

 

 $(document).ready(function(){

});

Now iniside that function, we need to define two variables: 

1. Variable to get the div we want to make sticky

2. Variable to get the position of the sitcky div

Our code will now look like this:

 <script type='text/javascript'>
  $(document).ready(function() {
      var stickydiv = $('#stickyad');
      var stickyPosition = stickydiv.position();
  });
  </script> 

#stickyad - refrences the adunit which we want to make sticky

stickydiv.position() - provides us with the top and left position of the unit

 

Now we want to excute code, when we start to scroll. To capture the scroll event handler we need to call the  $(window).scroll function.

We then want to get the scrollbar vertical postion as we scroll, so we will need another variable. 

 

 <script type='text/javascript'>
  $(document).ready(function() {
      var stickydiv = $('#stickyad');
      var stickyPosition = stickydiv.position();

      $(window).scroll(function() {
          var scrollBarPosition = $(window).scrollTop();

      })
  });
  </script> 

The variable scrollBarPostion, will provide us the position of the scroll bar. We will be using this when we make the scrolling check in the next step. 

After we have the position, we now need to make a decision. 

If we are scrolling we need to make the adunit sticky, if we are not scrolling the adunit should stay in its position. 

So we will implement the following If statement, inside the scroll function: 

 <script type='text/javascript'>
  $(document).ready(function() {
      var stickydiv = $('#stickyad');
      var stickyPosition = stickydiv.position();

      $(window).scroll(function() {
          var scrollBarPosition = $(window).scrollTop();

          if (scrollBarPosition & gt; = stickyPosition.top) {

          } else {

          }

      })
  });
  </script> 

Now that we have our if statement we can make the ad unit sticky. 

When we start scrolling and the scroll bar is past the top of the adunit we want to adunit to now be sticky, so using css we will set the position to fixed. 

If the scroll bar is not past the top of the unit then the unit will remain in it's fixed position.

Using css we will set the position to relative. 

 

With these points in mind, we will now implement the final piece of our code which makes the unit sticky. 

Add in any css you need so the adunit matches he styling and placement of your site: 

 <script type='text/javascript'>
  $(document).ready(function() {
      var stickydiv = $('#stickyad');
      var stickyPosition = stickydiv.position();

      $(window).scroll(function() {
          var scrollBarPosition = $(window).scrollTop();

          if (scrollBarPosition & gt; = stickyPosition.top) {
              stickydiv.css({
                  'position': 'fixed',
                  'top': 5
              })

          } else {
              stickydiv.css({
                  'position': 'relative',
                  'top': 0
              })
          }

      })
  });
  </script> 

And that is it, we now have a sitcky ad unit.

 

Click the download button below to see this working on a test page.

A Mobile Sticky Ad Guide and Demo - click here