var changeHeight = () => { let flag = 0; while(flag != 1) { size += 1; return size; } if(size == window.innerHeight/2){ flag == 1; } } var size = 5; document.body.style.height = "10000px"; const div = document.createElement("div"); div.style.width = "100%"; div.style.position = "fixed"; div.style.left = "0"; div.style.top = "0"; div.style.backgroundColor = "green"; document.body.appendChild(div); window.addEventListener("scroll", changeHeight); div.style.height = size + "px"; Está vacío con solo <script src="script1.js"> </script> dentro
Quiero crear una barra en la parte superior del objeto de la página mientras me desplazo, lo que aumenta la altura hasta la height == window.innerHeight/2 después de esto, el desplazamiento debería disminuir su tamaño.
Mi problema es que no puedo devolver la variable de tamaño sobre la función, ¿o hay algo más mal?
while es innecesario en este caso y no tiene ningún código que le diga a este elemento que disminuya su tamaño.
En este ejemplo, el elemento dado disminuirá y aumentará su tamaño de un lado a otro
let size = 5; let flag = 0; const step = 1; const changeHeight = () => { if(size >= window.innerHeight / 2 && flag === 0){ flag = 1; } else if (size <= 0 && flag === 1) { flag = 0; } div.style.height = `${flag ? size-=step : size+=step}px`; } document.body.style.height = "10000px"; const div = document.createElement("div"); div.style.width = "100%"; div.style.position = "fixed"; div.style.left = "0"; div.style.top = "0"; div.style.backgroundColor = "green"; document.body.appendChild(div); window.addEventListener("scroll", changeHeight); <html> <body> </body> </html>var size = 5; var halfWay = false; const changeHeight = () => { console.log("size", size); if (size <= window.innerHeight / 2 && !halfWay) halfWay = false; else halfWay = true; if (!halfWay) { // If the height is less than or equal to the windows inner height increase the height of the div element. size += 1; return size; } else if (halfWay && size > 5) { // If the height has come down to the halfway point of the windows inner height then decrease the height of the div element. size -= 1; return size; } else { // Resets to original values halfWay = false; size = 5; return size; } // Original code. /* let flag = 0; console.log("b4", size); while (flag != 1) { size += 1; console.log("after", size); return size; } if (size == window.innerHeight / 2) { flag = 1; } */ } document.body.style.height = "10000px"; const div = document.createElement("div"); div.style.width = "100%"; div.style.position = "fixed"; div.style.left = "0"; div.style.top = "0"; div.style.backgroundColor = "green"; div.style.height = "5px"; document.body.appendChild(div); console.log("Window innerHeight:", window.innerHeight); window.addEventListener("scroll", () => { div.style.height = changeHeight() + "px"; console.log("size in listner:", size); });