JS for ads to scroll into view then remain visible as page scrolls further?

In the past year I’ve noticed on some big sites a newer ad format, basically wide skyscraper type ads which remain in view in a sidebar area as the viewer scrolls down the page.

I’d like to do something similar. Would it be possible for an ad which begins out of view to remain in view once the visitor goes to scroll past it?

I would be wanting to setup this type of ad as the last item in my sidebar area. This way for longer pages the sidebar has an ad that remains in view rather than blank unused whitespace.

Any ideas on where I might find a script that works like this?

Thanks in advance for any help.

Use CSS’s position:fixed.

If that’s not what you mean, and you want it to become fixed only after a certain distance has been scrolled, you need to do some measuring, specifically how much has been scrolled (document.documentElement.scrollTop) and how far from the top the ad is (ad.offsetTop).

You have to be careful with offsetTop though, because the top of the window may not be the element’s [URL=“https://developer.mozilla.org/en/DOM/element.offsetParent”]offsetParent.

This works in all browsers. All settings are at the top of the script. “Starting point” is the place where the advert box starts. You can vary the time between checks on the position. Initially it is set a 800 msecs. You might like to play with the movement, so that it slides into position.

<html>

<head>
<meta http-equiv=“Content-Language” content=“en-au”>

<script type=“text/javascript”>
<!–
// range of travel relative to top of box
var lowestTravel=900, highestTravel=12, startPoint=400; // global travel limits
//
// global variables
var currentOffset=500, newOffset=0, boxObj=null, slideStarted=false;
// ======= pause between checks set here ====================
//
var timeBetweenChecks=800; // in millisecs
// ==========================================================
//
function chk()
{ // determine scroll offset
if(document.body && typeof document.body.scrollTop !=“undefined”)
{ newOffset= document.body.scrollTop } // modern browsers
else
{ if(document.body && typeof window.scrollY !=“undefined”)
{ newOffset= window.scrollY } // not IE but others
}
//
// check if slide started
if(slideStarted || newOffset>startPoint)
{ slideStarted=true;
// box has not moved
if(currentOffset==newOffset)
{ setTime_out(); return; }
// ----------
// if box has moved
boxObj=document.getElementById(“advertR”);
currentOffset=newOffset;
boxObj.style.top=((currentOffset<=highestTravel)?highestTravel : (currentOffset>lowestTravel)?lowestTravel : currentOffset+12)+“px”;
}
setTime_out();
}

// ========= ======
var timeOutID=null; // global
//
// checks to see if page has been scrolled
function setTime_out()
{ clearTimeout(timeOutID);
timeOutID=window.setTimeout(“chk()”, timeBetweenChecks)
}
//

//–>
</script>
<style type=“text/css”>
<!–
body { font-family:arial, sans-serif; font-weight:normal; color:#000; }
#bdr_bdy { position:relative; top:10px; left:10px; width:920px; height:1500px; border:1px solid #C0C0C0; }
#txtL { border:1px solid red; position:absolute; top:10px; left:10px; width:500px; height:1450px; text-align:left; padding:5px; }
#advertR { border:1px solid red; position:absolute; top:400px; right:30px; width:350px; text-align:center; padding:5px; }
#advertR p { margin-top:0px; margin-bottom:5px; }
.a13B { font-size:13px; }
–>
</style>
</head>

<body onload=“window.setTimeout(‘chk()’,800)”>

<div id=“bdr_bdy”>
<div id=“txtL”>
<p class=“a13B”>The side box will stay at its starting point until the page
scrolls down to cover it. At this point it will slide up and down until the
page reloads. Starting point for the box and upper and lower travel limits
can be set in the script.
</div>
<!-- end txtL –>
<div id=“advertR”>
<p class=“a”><b>Et anno quidem illo intermissa erant studia mea, dum mihi
reducto a Madauris, in qua vicina urbe iam coeperam litteraturae atque
oratoriae percipiendae gratia peregrinari, longinquioris apud</b>.</p>
<p class=“a”>Karthaginem peregrinationis sumptus parabantur, animositate
magis quam opibus patris, municipis Thagastensis admodum tenuis. cui narro
haec? neque enim tibi, deus meus, sed apud.</p>
<p class=“a”>Tte narro haec generi meo, generi humano, quantulacumque ex
particula incidere potest in istas meas litteras. et ut quid hoc? ut
videlicet ego et quisquis haec legit cogitemus, de quam profundo clamandum
sit ad te. et quid propius auribus tuis, si cor
</div>
</div>

</body>

</html>