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