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";
It's empty with only <script src="script1.js"> </script> inside
I want to create stick to the top of the page object while scrolling which increases height until height == window.innerHeight/2 after this, scrolling should decrease it's size.
My problem is that I cannot return size variable over the function, or is there something more wrong?
while is unnecesery in this case and you don't have any code that will tell this element to decrease its size.
In this example given element will decrease and increase its size back and forth
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);
});