Mostrar y Ocultar DIV al hacer SCROLL con Jquery

En algunas ocasiones necesitamos que cierto elemento aparezca o desaparezca al scroll en la pagina web.
Para ello solo debemos indicar en el Jquery que DIV queremos ocultar o mostrar. En nuestro caso tenemos el siguiente Div:

<div id="caja-flotante">CAJA FLOTANTE</div>

Ahora Escribimos el siguiente codigo en Jquery:

<script>
    $(function(){
        $(window).scroll(function(){
            if ($(window).scrollTop() > 30)
            {
                $("#caja-flotante").fadeOut();
            }
            else
            { 
                $("#caja-flotante").fadeIn();
            }
        });
    });
</script>

Ahora al hacer scroll el div indicado se mostrara o ocultara, esta tecnica es ideal para FANBOX de redes sociales como se muestra en este post:

 http://codigos-taz.blogspot.pe/2016/01/fanbox-de-redes-sociales-flotantes-en.html