The page I'm working on is coded with tables. I know, I know. But it's what I have for now :-/
I have two columns: the left is the main content, then the right is a 300x250 banner, then a widget, then a 300x600 banner, then another widget, then empty space until you get to the bottom of the table. That 300x600 is surrounded with <div style="position: sticky; top: 0">...</div>
Beneath the table is another ad with position: relative. I THOUGHT that the 300x600 would stay put until this bottom banner reaches it, and then it would scroll on up.
What I'm seeing is that the 300x600 ad stays put, and the widget beneath it scrolls behind it (hidden). But once the bottom of the widget reaches the bottom of the ad, the ad scrolls on away!
Then I thought, I don't really need that second widget anyway! So I removed it. But then, the banner isn't sticky at all!
What am I missing?
Here's the exact code for the 300x600:
<style>
#block_3 {
position: sticky !important;
top: 0
}
.med_rect {
width: 300px;
/* overwritten inline */
max-height: 250px;
padding: 10px;
margin-bottom: 10px;
border: 1px solid #E3E3E3;
background: #F5F7F9
}
</style>
<div id="block_3" class="med_rect" style="height: auto; max-height: none !important; margin-bottom: 20px">
<script>
// tableWidth is defined elsewhere
if (tableWidth >= 975)
googletag.cmd.push(function() { googletag.display('block_3'); });
</script>
</div>
