I am looking to create a div that dynamically adjusts its height based on the user's scrolling behavior. The goal is for the div to expand to the very top as the user scrolls downward, and stop when it reaches 70% of the container/parent element. Is there a library available to achieve this smoothly without using incremental adjustments to the height property? Please see the example below:
<div id='container'>
Scroll up to here
<div id='panel'>
As the user scrolls down in this div, expand it to the top incrementally.</br></div>
</div>
#container {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: red;
}
#panel {
position: fixed;
width: 100%;
height: 70%;
bottom: 0;
background-color: green;
overflow-y: scroll;
}