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

The background color of the active tab is updated upon loading the page

Error Alert - Troubleshooting AJAX JSON Parsing Issue

Prevent the ability to drag and drop within specific div elements

Fetch additional data from a table by utilizing Ajax and PHP

Mishandling of string interpretation

How can you toggle the visibility of a text based on the selection of a jQuery radio button?

Troubleshooting: When Angular Fade In Out Animation Won't Work

Crop and resize a portion of an image using CSS

The GitHub Pages website is not displaying exactly like it does when running locally with a live server

Working with time durations in JavaScript

Using a PHP variable as the input for the img src attribute in HTML

Bidirectional binding of attributes in an Angular directive

Creating an Elastic Beanstalk instance from an s3 bucket using the aws-sdk tutorial

Definition of Angular 2 File

Guide to making a button in jQuery that triggers a function with arguments

Issue with tile size or alignment in Safari

Triggering a re-render in React

Switch the display of a div within a ng-template loop using PrimeNg

"Encountering a problem with posting API requests using Express

Problem encountered with PDFKit plugin regarding Arabic text rendering