X

LATEST #JQUERY NEWS

Improve Your Viewability Score with Fixed Ads


Display viewability is the next big thing in digital advertising — basically, it’s all about making sure that as many of your ad impressions as possible are viewable by the user. A relatively easy way to make ads more viewable (and boost your viewability score) is to give your ads fixed positioning. For example, leaderboard ads at the top of a page often get scrolled past before the page even loads, but if those ads have a fixed positioning, they’ll stick to the top of the screen as the user scrolls, and consequently they become very visible.

But what if you don’t want the ad to stay fixed to the top of the screen forever? jQuery’s scrollTop, addClass, and removeClass functions allow us to make some changes to the ad’s positioning once the user has scrolled a certain amount of pixels past the top of the page.

Let’s say your leaderboard has an id of top-banner. To make the banner, fixed, we need to add a new class to the banner (banner-fixed) with some specific styling, like this:

.banner-fixed{
position: fixed;
z-index: 10000;
}

It’s a good idea to give the ad a high z-index so that it doesn’t hide beneath any of the content as the user scrolls.

We’re going to need another CSS class to assign to the banner when we want to change it’s positioning. It should look something like this:

.banner-not-fixed{
position: absolute;
z-index: 10;
}

Now it’s time to add the jQuery code that will add/remove these classes.

$(document).ready(function(){
  $("#top-banner").addClass('banner-fixed'); //adds the class that makes the top banner ad fixed
  $(window).scroll(function(){
    if($(this).scrollTop() >=1000){ //when the page scrolls past 1000px
      $("#top-banner").removeClass('banner-fixed').addClass('banner-not-fixed');
    };
  });
});

Now your leaderboard ad should stick to the top of the screen until you scroll 1000 pixels down the page, where it will return to its original placement. This trick should significantly increase the visibility of your ads!

Recently Published

article image
»

jQuery’s .children() Method

Just like in CSS, it’s possible to use jQuery to select the ...

article image
»

jQuery’s .click() Method

With jQuery, it’s super easy to make something happen as a result ...

article image
»

Using jQuery’s .resize() Method

jQuery’s .resize() method is a cool way to have an event ...

article image
»

How to Use jQuery to Search and Replace HTML

Have you ever made a mistake in your code or in your text and dreaded ...

article image
»

How to Use jQuery’s .mouseover() Method

jQuery’s .mouseover() method is used to execute some jQuery ...

article image
»

How to Use jQuery’s .blur() Method

jQuery’s .blur() method isn’t exactly what it sounds like ...

article image
»

jQuery 3.0: Fix url.indexOf is Not a Function Error

jQuery 3.0 is out, and if you started working with it and plan to ...

article image
»

Set/Get/Delete Cookies with jQuery

There are a lot of plugins you can use to set, get, and delete ...

Screen Shot 2016-11-26 at 12.05.09 PM
»

3 Best jQuery Video Gallery Plugins

Do you have a lot of videos that you’d like to embed or neatly ...