Mostrar popup con enlaces a redes sociales al hacer scroll mediante jQuery y CSS

Actualmente, las redes sociales están en auge. Estas plataformas hacen que sea más sencillo interactuar con nuestros visitantes, recibir mucho más tráfico y promocionar nuestro sitio web. Es decir, en otras palabras podríamos decir que, para cualquier sitio web que se precie, las redes sociales se han convertido en algo indispensable. Y no solo eso, tener presencia en Facebook, Twitter y demás, es un aspecto muy importante también para el SEO.

Es por eso que, hoy en día, todo sitio web cuenta con sus típicos botones para compartir en redes sociales. Los botones más populares son el Like de Facebook, el Seguir de Google+, el Seguir de Twitter y el Seguir de LinkedIn. En este tutorial veremos cómo abrir un popup al hacer scroll con los típicos botones de redes sociales, mediante jQuery y CSS. Es decir, cuando los visitantes vayan a la portada de tu sitio web y bajan hacia abajo haciendo scroll, aparecerá un popup. Este popup contendrá los botones que hemos nombrado antes. Esto ayudará a tus visitantes a encontrarte en las redes sociales más populares.

Para implementar todo este sistema, como he comentado antes, utilizaré jQuery, CSS y HTML. Obviamente, puedes incorporar todo esto que publico a continuación en tus propios proyectos.

Codigo Javascript

Lo primero que tenemos que hacer es incluir la librería jQuery.

<script src="//http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Utilizaremos la función $(window).scroll() para detectar el evento scroll. CloseSPopup() es una función de Javascript que he creado para esta ocasión que gestiona el evento de cerrar el popup.

$(window).scroll(function(){
    if($(document).scrollTop()>=$(document).height()/5)
        $("#spopup").show("slow");else $("#spopup").hide("slow");
});
function closeSPopup(){
    $('#spopup').hide('slow');
}

Código CSS

Utilizaremos este código CSS para personalizar el popup.

#spopup{
    background:#f3f3f3;
    border-radius:9px;
    -moz-border-radius:9px;
    -webkit-border-radius:9px;
    -moz-box-shadow:inset 0 0 3px #333;
    -webkit-box-shadow:inset 0 0 3px #333;
    box-shadow:inner 0 0 3px #333;
    padding:12px 14px 12px 14px;
    width:300px;
    position:fixed;
    bottom:13px;
    right:2px;
    display:none;
    z-index:90;
}

Código HTML

El contenido del popup debe ir dentro del div spopup.

<div id="spopup" style="display: none;">
    <!--close button-->
    <a style="position:absolute;top:14px;right:10px;color:#555;font-size:10px;font-weight:bold;" href="javascript:void(0);" onclick="return closeSPopup();">
        <img src="ico-x.png" width="18" height="18"/>
    </a>
    <!--inserta el contenido del popup aqui-->
</div>

Fuente: codexworld.com

COMPARTE ESTE ARTÍCULO

COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN LINKEDIN
COMPARTIR EN WHATSAPP