Banner (Div) fisso allo scorrimento della pagina. <alebal web Blog> | Appunti di PHP, MySql, javascript, Css, HTML, HTML5 e altro...

Forse avrai notato sulla destra in basso un banner che quando scorri verso il basso si ferma nella parte alta della finestra del browser. Non va oltre, si ferma li anche se continui a scorrere. Scorrendo verso l'alto invece torna al suo posto fuori dalla finestra del browser.

Da quanto ho letto nei vari forum questo modo di posizionare i banner non viola le norme di adsense, non modifica la visualizzazione, non copre altri oggetti, ecc ecc ecc... Poi si sa che il maledetto comunque trova sempre una scusa se ti vuole buttare fuori...

Questo giochino viene fatto da qualche riga di codice javascript che cambia il valore position dello style di un div.

Calcola la distanza del div dal top della pagina, e rileva di quanti pixel hai già scrollato. Se hai scrollato più della distanza del div dal top della pagina, cambia lo stato del valore position in fixed.


<div id="banner_fisso"></div>
<script>
var el = document.getElementById('banner_fisso');
var elTop = el.getBoundingClientRect().top - document.body.getBoundingClientRect().top;
window.addEventListener('scroll', function(){
    if (document.documentElement.scrollTop > elTop){
        el.style.position = 'fixed';
        el.style.top = '0px';
    }else{
        el.style.position = 'static';
        el.style.top = 'auto';
    }
});
</script>

Questo in particolare funziona molto bene in firefox, molto meno bene in chrome.

Se avrò tempo ne cercherò uno che funzioni bene con entrambi.

In realtà se ne trovano, ma tutti funzionano con Jquery, che a me sinceramente fa abbastanza schifo e non lo volgio usare. Trovo stupido richiamare un intero framework per un giochino che si può realizzare con 3 righe di Javascript.

Google Digg Reddit Tumblr Pinterest StumbleUpon Email

Rating: 5 out of 5 by 492 visitors

Leave your comment