Sorry if this is a dumb question, I am super new to programming in html and Javascript.
I know, that I can change some transformation with the scrollpositon, but right now I'm a bit lost. I want to increase the height of a box, when the user scrolls down.
It starts with
"height: 60px;"
and then I'd like it to grow like "height ="60 + scrollY * a very small number + px".
Is there any way to achieve this?
Kind regards and greetings!
let height = 60;//default height
document.addEventListener("mousewheel", function(event){
if(event.wheelDelta >= 0){
height--
element.style.height = `${height}px`
}else{
height++
element.style.height = `${height}px`
}
})
You can use the scroll_event to enlarge the box when a user scrolls.
Here is an example of how to change the box height on scroll using dynamic calculation.
<html lang="en">
<head>
<title>Scroll large demo</title>
<style>
body {
min-height: 1000px;
background: aliceblue;
}
#box {
height: 60px;
background: red;
color: white;
vertical-align: middle;
text-align: center;
position: fixed;
margin: 0 auto;
padding: 15px;
}
</style>
</head>
<body>
<div id="box">
I am going to enlarge when you scroll
</div>
<script>
let lastKnownScrollPosition = 0;
let ticking = false;
function doSomething(scrollPos) {
document.getElementById("box").style.height = 60 + (scrollPos * 0.25) + "px";
}
document.addEventListener('scroll', function (e) {
lastKnownScrollPosition = window.scrollY;
doSomething(lastKnownScrollPosition);
if (!ticking) {
window.requestAnimationFrame(function () {
doSomething(lastKnownScrollPosition);
ticking = false;
});
ticking = true;
}
});
</script>
</body>
</html>