Encontré este código aquí: https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onscroll3 y aunque funciona cuando escribo la URL en mi navegador móvil, no funciona cuando previsualizo el archivo en mi editor de código (usando Dreamweaver actualmente).
Intenté aplicar el desbordamiento: desplácese hasta el HTML y el cuerpo, también intenté usar scrollTop, scrollY y aplicar el desplazamiento de página a una variable como var scrollY = window.pageYOffset; pero parece que no puede hacer que funcione. Agradezco cualquier ayuda! Puedo ver que es posible activar funciones de javascript en función de las posiciones de la pantalla móvil, pero parece que no puedo encontrar las soluciones.
window.onscroll = function() {myFunction()}; function myFunction() { if (document.body.scrollTop > 350 || document.documentElement.scrollTop > 350) { document.getElementById("myImg").className = "slideUp"; } } .slideUp { animation-name: slideUp; -webkit-animation-name: slideUp; animation-duration: 1s; -webkit-animation-duration: 1s; visibility: visible; } @keyframes slideUp { 0% { opacity: 0; -webkit-transform: translateY(70%); } 100% { opacity: 1; -webkit-transform: translateY(0%); } } @-webkit-keyframes slideUp { 0% { opacity: 0; -webkit-transform: translateY(70%); } 100% { opacity: 1; -webkit-transform: translateY(0%); } } body {height:1500px;} .col-1 {float:left} .col-2 {float:left;padding-left:25px;} img {width:180px;height:100px;visibility:hidden;} hr {margin-top:400px;} <p>Scroll down this page.</p> <p>When you have scrolled 350px from the top, an image will slide in.</p> <hr> <div class="col-1"> <img id="myImg" src="img_pulpit.jpg" width="304" height="228" alt="img"> </div> <div class="col-2"> Just some text.. </div>