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.
<style>
div.sticky {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
}
</style>
// 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" });
</script>
</div>
</div>
