Plovoucí (floating div) SkyScraper reklama

SkyScraper o rozměru 120x600px je velice často používaný, pro čtenáře mimořádně otravný, ale pro inzerenty velice oblíbený reklamní formát. Díky jQuery jej můžete snadno udělat ještě viditelnější tím, že bude ladně plavat ve vertikálním směru po obrazovce.

Napsal jsem si na to jeden krátký skript, který respektuje výšku skyscraperu, jeho původní umístění o skyscraperOffset pixelů pod horním okrajem obrazovky a také zajišťuje, aby jeho obsah nevlezl do patičky webu, ale zastavil své plavání těsně nad ní. Celý DIV #skyscraper samozřejmě musí být absolutně pozicován.

Celý Javascriptový kód je zde, můžete jej libovolně použít:

$(document).ready(function(){
 var skyscraperAd = $("#skyscraper");
 var skyscraperOffset = skyscraperAd.offset().top;
 var skyscraperBottom = $("#footer").offset().top - skyscraperAd.height();
 $(window).scroll(function() {
   skyscraperAd.stop();
   var windowTop = $(window).scrollTop();
   if (windowTop > skyscraperOffset) {
      if (windowTop > skyscraperBottom) windowTop = skyscraperBottom;
      if (windowTop < 0) windowTop = 0;
      skyscraperAd.animate({top: windowTop + 'px'}, 'fast');
   } else
      skyscraperAd.animate({top: skyscraperOffset + 'px'},'fast');
 });
});

A k tomu se váže (jako příklad) následující CSS:

#skyscraper {
  width:120px; height:600px; 
  position:absolute; 
  top:300px; left:50%; margin-left:500px; 
}