Developers

How to Add a Sticky Header Ad With a Timer

How to Add a Sticky Header Ad With a Timer

Timed stickiness optimizes for visibility on high page speed layouts

Generating effective ad revenue is one the most important integrations for any publisher. If a site's ad experience is not loaded properly, it will not only result in a bad user experience, but also a low PageSpeed Insights score as measured by Google, and this puts your organic traffic at risk.

The wrong way to integrate ads into your site is to load them before a browser has a chance to display other content. This is a tricky balance to get right because ads still need to load quickly to register impressions and generate revenue.

On RebelMouse, we implement ads so that they load quickly while not affecting page-rendering performance. These ads are referred to as "sticky," which means they're always visible on the page even when a user is scrolling — users still see them, and publishers still get the impressions they need.

Using a sticky header ad with a timer so it loads quickly is a great way to optimize for both ad visibility and site performance. Here's how it works.


First, click here to familiarize yourself with our Header Code and Ad Header Code elements. Then, to create a sticky header ad with a timer, you must first set up an ad wrapper:

<!-- Define the ad placement -->
<div class="top-banner">
   <div id="banner_ad_id">
       <script>
       googletag.cmd.push(function() { googletag.display("banner_ad_id"); });
       </script>
   </div>
</div>

Next, use JavaScript to make it sticky upon load:

<script>
const stickyTime = 4;
googletag.cmd.push(() => {
  const topBanner = document.getElementById("top-banner");
  googletag.pubads().addEventListener('slotRenderEnded', e => {
      let banner_ad_id = "banner_ad_id";
      let div_ad =document.getElementById(banner_ad_id)
      if (banner_ad_id) {
          // check if the slot is empty and if the rendered slot is actually the banner slot
          if (e.slot.getSlotElementId() === banner_ad_id && !e.isEmpty) {
              document.body.classList.add("sticky-banner-ad");
              topBanner.style.height = div_ad.clientHeight + "px";
              setTimeout(() => {
                  document.body.classList.remove('sticky-banner-ad');
              }, stickyTime * 1000);
          }
      }
  });
});
</script>

Finally, add some styling:

<style>
    /*----  style the banner ad to fix it at top ------ */
 .sticky-banner-ad .top-banner{
     position: fixed;
       width: 100vw;
       top: 100px;
       left: 0;
       z-index: 9;
       display: block;
background: #fff;
       margin: 0 !important;
     }
     @media (max-width:767px){
          /*------- mobile top distance if needed------ */
       .sticky-banner-ad .t
op-banner{
       top:70px;
       }     }
     </style>

Your sticky ad header with a timer is complete. For a guide on all the elements available in our Layout & Design tool, click here.

Click the links below to view live examples of this feature on RebelMouse-powered sites:

If you have any questions about how to implement a sticky ad header with a timer, email support@rebelmouse.com or talk to your account manager today.

What Is RebelMouse?
Request a Proposal

Where 
Websites Are Built

The Fastest Sites in the World Run on RebelMouse

Let’s Chat

new!

RebelMouse Performance Monitoring

Real-Time Core Web Vitals

Get Started
DISCOVER MORE

Our Core Features

Our platform is a complete digital publishing toolbox that's built for modern-day content creators, and includes game-changing features such as our:

Layout and Design toolLayout and Design tool on mobile
animate
animate

Why RebelMouse?

Unprecedented Scale

RebelMouse sites reach more than 120M people a month, with an always-modern solution that combines cutting-edge technology with decades of media savvy. And due to our massive scale, 1 in 3 Americans have visited a website powered by RebelMouse.

120M+ Users
550M+ Pageviews
17+ Avg. Minutes per User
6+ Avg. Pages per User

Today's Top Websites Use RebelMouse

Thanks to the tremendous scale of our network, we are able to analyze a wealth of traffic data that informs our strategies and allows us to be a true strategic partner instead of just a vendor.

upworthyindy100Vault12No Film SchoolRawStoryResponsible StatecraftPrideMNI Market NewsPremierGuitarPenskeINN Educate Brand ConnectThe FulcrumGZEROOkayafricaBrit+CoPaper MagazinePowerToFlyNarcityCommonDreamsAllBusiness

What Clients Say

We’re here to help you weigh and understand every tech and strategic decision that affects your digital presence. Spend less time managing everything yourself, and more time focused on creating the quality content your users deserve.

Case Studies

A Team Built Like No Other

RebelMouse employs a unique, diverse, and decentralized team that consists of 70+ digital traffic experts across more than 25 different countries. We have no central office, and we cover every time zone to ensure that we’re able to deliver amazing results and enterprise-grade support around the clock.

Our team is well-versed in all things product, content, traffic, and revenue, and we strategically deploy ourselves to help with each element across all of our clients. We thrive on solving the complex.

Let's Chat