Skip to main content
Submit a request

Make an Ad Sticky

Updated

Overview

Sticky ads keep regular display ads in the viewport longer. Multiple products have this behavior, but this option allows any ad unit to stick using regular CSS.

A sticky ad will "stick" to the top of the viewport as the user scrolls down. The ad will stop sticking when the user reaches the bottom of the ad unit's parent container.

Publishers often use this option for rail units, though it can be applied to any normal display placement.

Create a Sticky Class

Create a sticky class in your site's <head> element. The top value controls how many pixels the sticky ad will stick from the top of the viewport. In this example, 0px will make it stick to the top of the viewport.

HTML

  <style>
	div.sticky {
		position: -webkit-sticky; /* Safari */
		position: sticky;
		top: 0px;
	}
</style>

Add the Sticky Class

Add a div around the ad tag and apply the sticky class. See the below example.

<div class="sticky">
	<!-- Tag ID: display_ad_1 -->
  	<div align="center" data-freestar-ad="__300x600" id="display_ad_1">
      <script data-cfasync="false" type="text/javascript">
         freestar.config.enabled_slots.push({ placementName: "display_ad_1", slotId: "display_ad_1" });
      </script>
   </div>
</div>

Known Conflicts

  • Ad div or parent/containing div is using overflow: hidden
    • Fix: Do not use overflow:hidden
  • Ad div is not sticking for the full length of the parent div
    • Fix: Ensure the parent div covers the full size available to it. This can often be done by applying height: 100% to the parent div
  • Ad div or parent/containing div is using display: inline-block
    • Fix: Do not use display: inline-block

Publisher Provided IDs->

Related articles