webdesign javascript jquery css html

css + jquery semi-floating footer

L'ho visto sul sito di Phonegap e mi è subito piaciuto. Si tratta di un footer diviso in due fasce orizzontali. La fascia superiore è sempre visibile, adagiata sul fondo della finestra del browser. L'altro pezzo invece si vede solo quando si raggiunge la fine della pagina. Quando si scorre la pagina verso il basso l'effetto è molto carino, perché ad un certo punto la fascia superiore si "sblocca" dal bordo per attaccarsi nella sua posizione naturale. Non ho "rubato" il codice dal sito di Phonegap, perché stilisticamente non mi mi piaceva, così ne ho scritto uno da me.

Come funziona

Abilita o disabilita la proprietà css position: fixed del floating-footer a seconda che con lo scorrimento della pagina si sia o no raggiunto il fondo. Ad ogni evento scroll viene chiamata la funzione onFooterScroll che controlla se lo scroll della pagina $(document.body).scrollTop() meno l'altezza del footer fluttuante abbia superato il valore della posizione naturale dell footer fluttuante $("#footer").offset().top meno l'altezza della finestra del browser $(window).height().

Il codice

HTML

Questo è il codice html, da inserire alla fine della pagina.

<div id="footer">
  <div id="floating-footer">
    <!-- contentuto della fascia superiore, quella fluttuante -->
  </div>
  <div>
    <!-- contentuto della fascia inferiore, che rimane sempre in basso -->
  </div>
</div>

Javascript

Questo è il codice javascript. Utilizza la libreria jQuery. L'ho testato con la versione 1.4, ma dovrebbe funzionare anche con le successive.

(function($) {
  function onFooterScroll(event) {
    var offset = $("#footer").offset().top;
    var scroll = $(document.body).scrollTop();
    var winHeight = $(window).height();
    if (scroll - $("#floating-footer").height() > offset - winHeight) {
      $("#floating-footer").removeClass("locked");
    } else {
      $("#floating-footer").addClass("locked");
    }
  }
  $(document).ready(function() {
    $(window).bind('scroll', onFooterScroll);
    $("#floating-footer").addClass("locked");
  });
}(jQuery));

CSS

#floating-footer.locked {
  position: fixed;
  bottom: 0;
  width: 100%;
}

Ti è piaciuto l'articolo? Condividilo! Commentalo!

comments powered by Disqus