DanGrecks ~ ¡Ayuda WebMaster!

Caja Emergente al Hacer Scroll

Este es otro código sencillo de acoplar a PWG, ya que se puede añadir como gadget (tipo HTML) y sólo es necesario copiar lo que después veremos dentro de él.

Lo peculiar es que aparece cuando se hace scroll en la página, a partir de determinada altura programada por nosotros. Y si se cierra manualmente pinchando el correspondiente símbolo (x) ya no volverá a aparecer hasta que no se refresque o se cargue otra página... para no molestar mucho.

 

Dentro he puesto para la oportuna demostración, los botones de Google+, Facebook y Twitter, pero de la misma manera y sólo cambiando esa parte, se puede utilizar para cualquier otra cosa, como podría ser un simple mensaje de aviso.

 

Se puede adornar como se quiera, pues para eso está el CSS, [ Haz Scroll hacia Abajo para Ver el Ejemplo En la Esquina izquierda de abajo ]

<script type="text/javascript">$(window).scroll(function(){ if($(document).scrollTop()>=$(document).height()/5) { $('#socialslide').show('slow'); } else {$('#socialslide').hide('slow');} }); function closesocialslide(){ $('#socialslide').remove(); ;} </script> <style type="text/css"> /* Contenedor general */ #socialslide { display: none; overflow: hidden; position: fixed; bottom: 30px; left: 21px; width: 134px; margin: 0; padding: 0 0 5px; font-size: 12px; background: black; border-radius: 8px; box-shadow: inset 0 0 4px #fff; } /* Botón cerrar */ #socialslide a { position: absolute; top: 3px; right: 4px; color: #ccc; font-size: 10px; font-weight: bold; } /* Rótulo superior */ #socialslide > a + div { text-align: center; margin: 0; padding: 10px; background: #800000; color: #fefefe; box-shadow: inset 0 0 4px #fff; } </style> <div style="display: none;" id="socialslide"> <a href="javascript:void(0);" onclick="return closesocialslide();">X</a> <div>Recomendar</div> <!-- Google Plus --> <div style="width: 68px;height: 25px;margin: 10px auto 0;"> <div class="g-plusone" data-size="medium"></div> </div> <!-- Facebook --> <div style="width: 105px;height: 25px;margin: 0px auto;"> <iframe src="//www.facebook.com/plugins/like.php?href=https://www.facebook.com/pages/By-À-AnGrecK-Á/294523207244211&send=false&layout=button_count&width=110&show_faces=false&font&colorscheme=light&action=like&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:110px; height:21px;" allowtransparency="true"></iframe> </div> <!-- Twitter --> <div style="width: 105px;height: 25px;margin: 0px auto;"> <a href="https://twitter.com/share" class="twitter-share-button" data-lang="es">Twittear</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script> </div> </div>

*Solo cambias mi Facebook [ https://www.facebook.com/pages/By-À-AnGrecK-Á/294523207244211 ] Por el url de tu facebok

Para que funcione hace falta tener instalada la librería jQuery. Si no la tenéis simplemente añadir antes de la siguiente línea:
 

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/>

*La caja emergente Solo aparece al Hacer Scroll hacia abajo, la caja contiene para compartir en Google, Facebook y Twitter. Espero les haya ayudado en algo, La caja no se aprecia bien debido a que yo tengo "Volver Arriba" con el mismo efecto, a ustedes si les saldrá completa. Saludos!