martes, 15 de noviembre de 2016

Div flotante con comportamiento

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