actualmente estoy tratando de crear una página donde las imágenes fijas individuales aparecen y desaparecen a medida que se desplaza. Encima de las imágenes hay texto. La aparición gradual mientras se desplaza hacia abajo funciona muy bien hasta ahora, pero desafortunadamente la desaparición gradual no se ve tan bien. Esto se debe a que arreglé las imágenes con Posición: pegajosa y solo se muestran cuando están al 100% en la ventana gráfica. Al desplazarse hacia arriba, esto funciona bien, pero al desplazarse hacia abajo, puede ver el borde superior de la imagen mientras se mueve fuera de la vista.

Desafortunadamente, no soy un profesional de javascript y no puedo encontrar la página donde encontré el código que estoy usando actualmente. De lo contrario, habría buscado allí nuevamente o lo habría vinculado aquí.

Sería genial si fuera suficiente para extender el código javascript.

Así es como se ve ahora: https://codepen.io/nejou/pen/yLvggoe

Este es el guión:

 (function(){ function hasClass(el, cls) { if (el.className.match('(?:^|\\s)'+cls+'(?!\\S)')) { return true; } } function addClass(el, cls) { if (!el.className.match('(?:^|\\s)'+cls+'(?!\\S)')){ el.className += ' '+cls; } } function delClass(el, cls) { el.className = el.className.replace(new RegExp('(?:^|\\s)'+cls+'(?!\\S)'),''); } function elementFromTop(elem, classToAdd, distanceFromTop, unit) { var winY = window.innerHeight || document.documentElement.clientHeight, distTop = elem.getBoundingClientRect().top, distPercent = Math.round((distTop / winY) * 100), distPixels = Math.round(distTop), distUnit; distUnit = unit == 'percent' ? distPercent : distPixels; if (distUnit <= distanceFromTop) { if (!hasClass(elem, classToAdd)) { addClass(elem, classToAdd); } } else { delClass(elem, classToAdd); } } // params: element id, class to add, distance from top, unit ('percent' or 'pixels') window.addEventListener('scroll', function() { elementFromTop(document.getElementById('fade-background-01'), 'active', 0, 'pixels'); }, false); window.addEventListener('scroll', function() { elementFromTop(document.getElementById('fade-background-02'), 'active', 0, 'pixels'); }, false); window.addEventListener('scroll', function() { elementFromTop(document.getElementById('fade-background-03'), 'active', 0, 'pixels'); }, false); window.addEventListener('scroll', function() { elementFromTop(document.getElementById('fade-background-04'), 'active', 0, 'pixels'); }, false); })();

Gracias por adelantado