What is the best way to change the height of a div element as the user scrolls using JavaScript exclusively?

Question

What is the best way to change the height of a div element as the user scrolls using JavaScript exclusively?

Coding with 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 Learning

There is little content, only

<script src="script1.js"> </script>

inside it.

What am I aiming for?

The objective is to make an element stick to the top of the page as the user scrolls, expanding in height until it reaches window.innerHeight/2. Once this limit is reached, the scrolling should reduce its size.

I'm encountering issues with returning the 'size' variable within the function. Could there be another error in my code?

javascript html css

Answer 1

Answer №1

Using a while loop is unnecessary in this scenario since there is no code to control the element's size decrease.

In this specific case, the element will continuously adjust its size, alternating between decreasing and increasing.

let size = 5;
let flag = 0;

const step = 1;

const changeSize = () => {
    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", changeSize);

<html>
  <body>
  </body>
</html>

Answer 2

Using a while loop is unnecessary in this scenario since there is no code to control the element's size decrease.

In this specific case, the element will continuously adjust its size, alternating between decreasing and increasing.

let size = 5;
let flag = 0;

const step = 1;

const changeSize = () => {
    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", changeSize);

<html>
  <body>
  </body>
</html>

Answer 3

Answer №2

let boxSize = 5;
let halfwayReached = false;

const adjustBoxHeight = () => {
    console.log("Current size of the box:", boxSize);
    
    if (boxSize <= window.innerHeight / 2 && !halfwayReached) halfwayReached = false;
    else halfwayReached = true;

    if (!halfwayReached) {
        // Increase the height of the box if it's less than or equal to half of the window inner height
        boxSize += 1;
        return boxSize;
    } else if (halfwayReached && boxSize > 5) {
        // Decrease the height of the box when it reaches the halfway point 
        boxSize -= 1;
        return boxSize;
    } else {
        // Reset back to original values
        halfwayReached = false;
        boxSize = 5;
        return boxSize;
    }
}

document.body.style.height = "10000px";
const box = document.createElement("div");

box.style.width = "100%";
box.style.position = "fixed";
box.style.left = "0";
box.style.top = "0";
box.style.backgroundColor = "green";
box.style.height = "5px";
document.body.appendChild(box);

console.log("Window innerHeight:", window.innerHeight);

window.addEventListener("scroll", () => {
    box.style.height = adjustBoxHeight() + "px";
    console.log("Box size in event listener:", boxSize);
});

Answer 4

let boxSize = 5;
let halfwayReached = false;

const adjustBoxHeight = () => {
    console.log("Current size of the box:", boxSize);
    
    if (boxSize <= window.innerHeight / 2 && !halfwayReached) halfwayReached = false;
    else halfwayReached = true;

    if (!halfwayReached) {
        // Increase the height of the box if it's less than or equal to half of the window inner height
        boxSize += 1;
        return boxSize;
    } else if (halfwayReached && boxSize > 5) {
        // Decrease the height of the box when it reaches the halfway point 
        boxSize -= 1;
        return boxSize;
    } else {
        // Reset back to original values
        halfwayReached = false;
        boxSize = 5;
        return boxSize;
    }
}

document.body.style.height = "10000px";
const box = document.createElement("div");

box.style.width = "100%";
box.style.position = "fixed";
box.style.left = "0";
box.style.top = "0";
box.style.backgroundColor = "green";
box.style.height = "5px";
document.body.appendChild(box);

console.log("Window innerHeight:", window.innerHeight);

window.addEventListener("scroll", () => {
    box.style.height = adjustBoxHeight() + "px";
    console.log("Box size in event listener:", boxSize);
});

What is the best way to change the height of a div element as the user scrolls using JavaScript exclusively?

Coding with JavaScript

HTML Learning

What am I aiming for?

Answer №1

Answer №2

Similar questions

Having trouble getting data to send to node.js server using $.ajax post

Spinning an SVG path with CSS3 in a circular motion from its central axis

Issue: 'node' is not being recognized when attempting to execute the file using the package.json script

Does not work in Electron's Chrome environment, although it does work in Node's console

Utilizing JQuery to Modify XML File Content

"Bootstrap4 - Troubleshooting the Issue of Multiple Carousels Not Function

What separates $(document).ready() from embedding a script at the end of the body tag?

Ways to add extra dots to your listing style

What is the proper method for setting up handlers in functional React components?

Ways to connect css file to ejs views in nodejs

The Node JS API remains unresponsive when the request parameters are increased, continuing to send multiple requests to the server without receiving

Stopping the interval in Vue before the component is destroyed

Storing each item in its own document within a Firebase collection

Tips for populating an HTML input with the value of a link element using JQuery

Initiate playing HTML video upon user click

Having trouble with jQuery.cookie saving my JSON data

Issues with vertical repeating in CSS Sprites

Leveraging Angular's capability to import files directly from the assets

Dropzone ceased functioning following the transition from version "4.2.0" to "5.7.0" while utilizing jquery version "3.3.1"

Optimal approach for handling large JSON files