Dzisiaj zaprezentuje w jaki sposób możesz na swojej stronie umieścić baner zwany także skyscraperem. Jest to baner o wymiarach 120×600 pikseli, który zazwyczaj wyświetlany jest po boku strony. Jest to jeden z tych rodzajów banerów, których efektywność jest największa (liczba kliknięć w baner), dlatego warto się zastanowić nad umieszczeniem go na swojej stronie. Nasz skrypt sprawi, że baner będzie się przemieszczał wraz z przewijaniem strony, dzięki czemu użytkownik będzie go cały czas widział. Ważnym plusem tego tutoriala jest fakt, że pojawienie się banera nie zmienia centrowania strony.
W naszym skrypcie w sekcji <head>…</head> dodajemy bibliotekę jQuery:
1 | <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script> |
Teraz musimy zadeklarować odpowiedni styl w tej samej sekcji:
1 2 3 4 5 6 7 8 9 10 11 12 13 | <!-- #container { width:775px; height:auto; margin:0px auto; } #skyscraper { width:120px; height:600px; float:left; border:0px solid; } --> |
Teraz przechodzimy do sekcji <body>…</body>. Tworzymy kontener strony o szerokości 775px, a w nim umieszczamy nasz baner w klasie skyscraper:
1 2 3 4 | <div id="container" style="position:relative"> <div id="skyscraper" style="position:absolute;top:0px;right:-142px;border:0px solid #827e80;border-left:0px;border-top:0px"> <!-- Tutaj wklejamy kod do bannera --> </div> |
Musimy jeszcze po tym divie dodać odpowiednią funkcję w Javascript, która będzie korzystać z biblioteki jQuery. Funkcja ta odpowiedzialna jest za „podążanie banera za użytkownikiem”, czyli jak użytkownik przewinie stronę w dół, to wraz za nim podąży baner.
1 2 3 4 5 6 | <script type="text/javascript"> $(window).scroll(function() { $('#skyscraper').animate({top:$(window).scrollTop()+"px" },{queue: false, duration: 350}); }); </script> |
Funkcja uaktywnia się w momencie, gdy użytkownik przewija okno w dół lub w górę. Wtedy div o id równym skyscraper zostaje animowany tak, że ustawiamy atrybut top, który jest równy przesunięciu strony licząc od jej góry.
Działający skrypt możecie znaleźć tutaj.
Popularity: unranked
Arkadiusz Tobiasz student Akademii Ekonomicznej im. Karola Adamieckiego w Katowicach na specjalnościach informatyka ekonomiczna oraz rachunkowość. 
