Establecer la opacidad de divs relacionada con la posición de desplazamiento

Estoy tratando de establecer la opacidad de una serie de divs en función de su proximidad individual a la posición de la barra de desplazamiento.

Esto es lo que tengo hasta ahora http://jsfiddle.net/jGeYg/1/

Me las arreglé para establecer la opacidad en 0 cuando estás en la parte superior de la ventana y sube a 1 cuando llegas a la parte superior de div.

Lo que estoy tratando de lograr es que no comience a aumentar la opacidad hasta que esté 50 px por encima del div y alcance la opacidad total cuando esté en la parte superior del div. Esencialmente es el rango donde los cambios de opacidad son

$('div').position().top - 50 -> $('div').position().top //psuedo code

No quiero usar un complemento. Tengo problemas con las matemáticas en lugar del código.

preguntado el 12 de junio de 12 a las 18:06

No estoy seguro de seguir tu penúltima oración. ¿Está diciendo que la opacidad debe ser 0 cuando la parte superior del div está a 50 px de la parte inferior de la ventana gráfica, y luego la opacidad debe ser 1 cuando la parte superior del div está a 0 px desde la parte superior de la ventana gráfica? Si lo entiendo correctamente, tenga en cuenta la experiencia del usuario cuando se ajusta la altura de la ventana gráfica. -

Quiero que la opacidad del div sea 1 cuando la parte superior de la ventana gráfica esté 50 px por encima del div. Re UX: es solo un experimento, no habrá ningún usuario. -

2 Respuestas

http://jsfiddle.net/b9ZCk/3/ Agregué un texto de depuración para mostrar la posición y la opacidad.

Respondido el 12 de junio de 12 a las 18:06

Eso es casi todo, pero parece que la opacidad aumenta antes de llegar al punto de corte de 50 px. Quiero que permanezca en 0 hasta que estés 50 px por encima de la parte superior del div. Gracias por tu ayuda en esto. - Finnnn

¿Cuándo la parte superior o inferior alcanza los 50px? - trumank

La parte superior de la ventana gráfica está por encima de la parte superior del div: Finnnn

No estoy seguro de si este es el efecto deseado que desea ... pero intente y hágamelo saber,

$(window).scroll(function() {
    var st = $(this).scrollTop();
    $('.block').each(function(index) {
        if (($(this).offset().top-st) < 50) {
            $(this).css({
                'opacity': (0 + (st / $(this).offset().top))
            });
        } else {
            $(this).css({'opacity': 0.1});
        }
    })
});

DEMO: http://jsfiddle.net/skram/jGeYg/5/

Respondido el 12 de junio de 12 a las 18:06

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.