Sticky Ads

Sticky Ads

Making an ad unit stick to the page

Typically this method is used for ads in a side rail that you want to stick to the top of the containing element as a user scrolls. For the most part, this CSS should work, however, there are a few known conflicts that will prevent it from working as expected.

Known Conflicts

  • If the sidebar div or parent/containing div is using overflow: hidden
    • Fix: Do not use overflow:hidden
  • If the sidebar div is not using the full height of the parent div
    • Fix: Make the sidebar 100% height
  • If the sidebar div or parent/containing div is using display: inline-block
    • Fix: Do not use display: inline-block

To make the 

// Add to the <head></head> of your page.
div.sticky {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;

// Add your sticky div in the body of the page where you would like your sticky ad to be placed.
// Use your ad tag provided be your Freestar Representative instead of the example below.
<div class="sticky">
   <!-- Tag ID: ad-slot-1 -->
   <div align="center" data-freestar-ad="__300x250 __300x600" id="ad-slot-1f">
      <script data-cfasync="false" type="text/javascript">
         freestar.config.enabled_slots.push({ placementName: "ad-slot-1", slotId: "ad-slot-1" });