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');
}

}
});

Css gradient con imagen

Imagen con gradiente.

Para colocarle gradiente a una imagen se debe colocar el siguiente estilo:

element.style {
background-image: linear-gradient(to left, rgba(20, 19, 19, 0.13), rgb(255, 253, 253)) , url(images/banners/image_default.jpg); 
 position: absolute;
 right: 0; 
 top: 0; 
 width: 70%;
 height: 460px; 
 z-index: -1; 
 background-repeat: no-repeat; 
 background-position: center 10%; 
}

Con esto podremo obtener una imagen degradada de izquierda a derecha, comenzando del blanco hasta la imagen.