Foros del Web - Ver Mensaje Individual

cristian_cena · #5 (**permalink**) 06/03/2012, 17:03

Se que estamos en foro de css y me van a criticar por esto, pero a mi modo de ver encarar el problema de los footer pegadizos solo con css ensucia el html y css, en su lugar una buena alternativa me parece esta. Un plugin jquery que solo debes llamar sobre el elemento que deseas que sea tu footer pegadizo.
Antes que vengan a descargar la artillería contra el uso de librerías también decir que si tu proyecto no soporta el peso de jquery (en serio?) podes escribir tu propia función.

Desventajas de este método:
debes cargar una librería y un plugin
debes usar javascript, navegadores que lo tengan desactivado (0,000001% de los usuarios) no lo verán.
ventajas:
una linea de codigo y lo tenes hecho.
no ensucias el html
no escribis css extra

probalo:

Código HTML:

Ver original<!DOCTYPE HTML>
<html lang="es-es">
    <head>
        <title>Pie siempre abajo</title>
        <meta charset="UTF-8">
        <style type="text/css">
            header, nav, footer { background: #ccc; border: 1px dashed #707070; padding: 2em; }         
        </style> 
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
        <script type="text/javascript">
            // aisla este plugin en un .js externo
            var footer;
            jQuery.fn.extend({
                stickyFooter: function(options) {
                    footer = this;
                    function positionFooter() {
                        var docHeight = $(document.body).height() - $("#sticky-footer-push").height();
                        if(docHeight < $(window).height()){
                            var diff = $(window).height() - docHeight;
                            if (!$("#sticky-footer-push").length > 0) {
                                $(footer).before('<div id="sticky-footer-push"></div>');
                            }
                            $("#sticky-footer-push").height(diff);
                            $("#sticky-footer-push").height(diff);
                        }
                    }
                    positionFooter();
                    $(window).scroll(positionFooter).resize(positionFooter);
                }
            });
        </script>
        <script type="text/javascript">  
            $(function(){ //ready
              $("footer").stickyFooter(); //llamas el plugin sobre el elemento que queres que sea el footer pegadizo
            })
        </script>
    </head>
    <body>
        <header>Header</header>
        <nav>
            <a href="#">item n</a><span> | </span>
            <a href="http://www.drupalcoder.com/blog/cross-browser-sticky-footer-with-fluid-height-using-jquery" target="_blank">fuente: tutorial / explicación</a>
        </nav>
        <section>
            <p>Lorem ipsum ...</p>
            <p>Lorem ipsum ...</p>
            <p>Lorem ipsum ...</p>
            <p>Lorem ipsum ...</p>
            <p>Lorem ipsum ...</p>
            <p>Lorem ipsum ...</p>
        </section>
        <footer>
            <div>margin-top</div> 
            <div>sticky footer, facil y limpio</div>
        </footer>
    </body>
</html>

saludos.