Is there a way to change the width of a div .progress container when the height of div #myContact reaches 100% on scroll?
I've attempted to link the HTML element with onscroll and onchange, but nothing seems to work.
<div onscroll="scrollProgress()" id="containter" class="snap">
<div class="progress-container"> //need to adjust width of this container
<div class="progress-bar" id="myContact"></div> //when this one hits 100% height
</div>
</div>
<script src="scroll.js"> </script>
#containter {
width: 100%;
height: 3000px; // original setting is 100vh, this value just for scrolling without pasting all other elements
scroll-behavior: smooth;
overflow: scroll;
scroll-snap-type: y mandatory;
}
.progress-container {
position: fixed;
width: 20%;
height: 100%;
}
/* The progress bar (scroll indicator) */
.progress-bar {
width: auto;
background: #000;
height: 0%;
max-height: 100%
}
// Scroll function
function scrollProgress() {
var elem = document.getElementById('containter');
var winScroll = elem.scrollTop;
var height = elem.scrollHeight - document.documentElement.clientHeight;
var scrolled = (winScroll / height) * 100;
document.getElementById("myContact").style.height = scrolled + "%";
};
// Expand function
/* When 'myContact' reaches 100% height then 'progres-container' expands left, and cover the entire screen*/
function expandMe() {
let trigger = document.getElementById('myContact').style.height;
if (trigger = 100) {
document.getElementById('progress').style.width = trigger + "%";
}
};
Currently, nothing happens and no errors are displayed.
Your assistance would be greatly appreciated!