Lo siento si esta es una pregunta tonta, soy muy nuevo en la programación en html y Javascript.
Lo sé, que puedo cambiar alguna transformación con la posición de desplazamiento, pero ahora mismo estoy un poco perdido. Quiero aumentar la altura de un cuadro, cuando el usuario se desplaza hacia abajo.
Empieza con
"altura: 60px;"
y luego me gustaría que crezca como "altura ="60 + scrollY * un número muy pequeño + px".
¿Hay alguna manera de lograr esto?
Saludos cordiales y saludos!
let height = 60;//default height document.addEventListener("mousewheel", function(event){ if(event.wheelDelta >= 0){ height-- element.style.height = `${height}px` }else{ height++ element.style.height = `${height}px` } })Puede usar scroll_event para agrandar el cuadro cuando un usuario se desplaza.
Aquí hay un ejemplo de cómo cambiar la altura del cuadro en el desplazamiento usando el cálculo dinámico.
<html lang="en"> <head> <title>Scroll large demo</title> <style> body { min-height: 1000px; background: aliceblue; } #box { height: 60px; background: red; color: white; vertical-align: middle; text-align: center; position: fixed; margin: 0 auto; padding: 15px; } </style> </head> <body> <div id="box"> I am going to enlarge when you scroll </div> <script> let lastKnownScrollPosition = 0; let ticking = false; function doSomething(scrollPos) { document.getElementById("box").style.height = 60 + (scrollPos * 0.25) + "px"; } document.addEventListener('scroll', function (e) { lastKnownScrollPosition = window.scrollY; doSomething(lastKnownScrollPosition); if (!ticking) { window.requestAnimationFrame(function () { doSomething(lastKnownScrollPosition); ticking = false; }); ticking = true; } }); </script> </body> </html>