How do I decrease and increase height of div on scroll with JavaScript only?-CodePudding

JavaScript

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";

HTML

It's empty with only <script src="script1.js"> </script> inside

What do I want to achieve?

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?

CodePudding user response：

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>

CodePudding user response：

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);
});