Div flotante :
Un div flotante se logra mediante los siguientes atributos:
position: fixed;
Ahora si deseas que se muestre a una altura en particular:
bottom: 100px; right: 5%;
Si quieres darle un comportamiento por ejemplo, que no se muestre el div al menos que el scroll este en altura en particular o que cierto elemento sea visible en la pantalla, se debe de realizar lo siguiente:
Primero añadir el atributo display:none al Div.
Usar una funcion para conocer si el elemento de referencia esta en la pantalla:
$.fn.extend({
// Devuelve true si el elemento está en window
isInScene : function(arg)
{
// Fuerza que arg sea un objeto
arg = arg || {};
// Valor por defecto de desfase
arg.desfase = arg.desfase || 0;
// Fuerza a que desfase sea númerico
arg.desfase = parseInt(arg.desfase,10);
// Posición vertical del elemento respecto al principio del documento
var pos_container = $(this).offset().top;
// Altura del elemento
var container_height = $(this).outerHeight();
// Posición vertical de document
var pos_document = $(document).scrollTop();
// Alto ventana
var window_height = $(window).height();
return (pos_document+window_height > pos_container+arg.desfase && pos_container+container_height > pos_document+arg.desfase);
}
});
Aqui se va a invocar a la funcion
$(document).scroll(function(e)
{
if( $("#form_registrazione").isInScene()) // esto nos indica que en patanlla el elemento form_registrazione y no queremos mostrar muestro div en este caso
{
$('#id_div_float_form').css('display', 'none');
}
else
{ // De lo contrario
if ($(document).scrollTop() > (parseInt($("#id_div_show_float_form").position().top)+parseInt($("#id_div_float_form").height()))){ // aqui nos indica en que posicion debe estar el scroll para mostrarlo
$("#id_div_float_form").css('display', 'block');
}
if ($(document).scrollTop() < (parseInt($("#id_div_show_float_form").position().top)+parseInt($("#id_div_float_form").height()))){ // Con este indicamos que el scroll en esta posicion va a ocultar nuestro div
$("#id_div_float_form").css('display', 'none');
}
}
});
No hay comentarios:
Publicar un comentario