Crear un sticky desplegable en la web

En ciertas ocasiones es interesante crear un sticky desplegable en la web que tengamos fijo en alguna parte de la pantalla al que el usuario pueda acceder en cualquier momento a la información, ya sea un formulario, una lista de enlaces, un chat…

Como siempre y para que sea lo más entendible posible voy a separar el código en partes y luego lo veremos todo junto para que se pueda ejecutar directamente. Aun así recomiendo que tanto el javascript como el css estén en archivos separados… bueno vamos a ello…

Lo primero es crear nuestra estructura html donde tenemos que llamar jQuery y en mi caso de forma adicional a font awesome… pero esto último no es necesario.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ocultar mostrar</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://use.fontawesome.com/4f8772f055.js"></script>
     
</head>
<body>  
    <div id="contactFormContainer">   
        <div id="contactForm">
            <a href="#" id="closeLink"><i class="fa fa-times" aria-hidden="true"></i> Cerrar</a>                
            <div class="clearfix"></div>
            <div class="spacer-mini"></div>
                Lo que queramos!                
        </div>        
        <div id="contactLink">¿EN QUÉ PODEMOS AYUDARTE? <i class="fa fa-envelope-o" aria-hidden="true"></i></div>   
    </div>
</body>
</html>

Como vemos lo único destacable, aparte de conectar por cdn a jQuery es que tenemos un contenedor que se divide en dos cajas… en nuestro caso llamadas contactForm y contactLink, (estos nombres son debidos a que yo suelo usar este componente para tener formulario de contacto). Ahora vamos a introducir nuestro código css:

#contactFormContainer {
    position: fixed;
    left: 40px;
    bottom: 0;
    z-index: 999999;
}
 
#contactLink {
    width: 350px;
    padding: 5px 20px;
    text-align: center;
    font-weight: bolder;
    display: block;
    cursor: pointer;
    background-color: #e5322c;
    color: #fff;
}
 
#contactForm {
    width: 350px;
    display: none;
    background-color: #e7e7e7;
    color: #444;
    padding: 20px;
    line-height: 100%;
    border: 1px solid #fff;
}
.spacer-mini {
    clear: both;
    display: block;
    height: 20px;
}

Con solo estas líneas de código podemos ir dándole ya forma y posición a nuestro sticky. De hecho en este caso lo estamos colocando abajo a la izquierda para tenerlo accesible ahí permanentemente. Como se ve es un código bastante sencillo que oculta toda la parte del contenido y deja solo la parte de la llamada a la vista, pero aun no tiene funcionalidad ninguna, esta se la vamos a introducir por medio del siguiente código jQuery que no hace otra cosa que modificar el estado del display de nuestra caja de contenido por medio de una pequeña animación.

$(document).ready(function(){   
    $("#contactLink").click(function () {
        $('#contactForm').toggle("slow");
    });
    $("#closeLink").click(function () {
        $('#contactForm').toggle("slow");
    });
});

Con esto ya podemos tener nuestro sticky listo y ahora las posibilidades abrirlo, cerrarlo, el que mostrar… son enormes y como se puede ver en el código completo, no es nada complicado…

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ocultar mostrar</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://use.fontawesome.com/4f8772f055.js"></script>
    <style>
#contactFormContainer {
    position: fixed;
    left: 40px;
    bottom: 0;
    z-index: 999999;
}
 
#contactLink {
    width: 350px;
    padding: 5px 20px;
    text-align: center;
    font-weight: bolder;
    display: block;
    cursor: pointer;
    background-color: #e5322c;
    color: #fff;
}
 
#contactForm {
    width: 350px;
    display: none;
    background-color: #e7e7e7;
    color: #444;
    padding: 20px;
    line-height: 100%;
    border: 1px solid #fff;
}
.spacer-mini {
    clear: both;
    display: block;
    height: 20px;
}
    </style>
</head>
<body>  
    <div id="contactFormContainer">   
        <div id="contactForm">
            <a href="#" id="closeLink"><i class="fa fa-times" aria-hidden="true"></i> Cerrar</a>                
            <div class="clearfix"></div>
            <div class="spacer-mini"></div>
                Lo que queramos!                
        </div>        
        <div id="contactLink">¿EN QUÉ PODEMOS AYUDARTE? <i class="fa fa-envelope-o" aria-hidden="true"></i></div>   
    </div>
    <script type="text/javascript">
        $(document).ready(function(){   
            $("#contactLink").click(function () {
                $('#contactForm').toggle("slow");
            });
            $("#closeLink").click(function () {
                $('#contactForm').toggle("slow");
            });
        });
    </script>
</body>
</html>

Crear un sticky desplegable en la web

Comentar este artículo