javascript - Expanding a div's height when page scrolls down -


i'm looking way dynamically change div's height when page scrolls. because have fixed panel on right side of screen, , menu banner @ top.

when @ top of page, top of side panel touches bottom of banner @ top. thing is, when page scrolled down , banner leaves screen, leaves gap size of top banner between top of screen , top of side panel. i'd put div between them grow in height when page scrolled down. there way in css or js ?

i can't have side panel have 100% height because hide elements on top banner, on lower resolution screens.

i added ugly images made on paint explain :

enter image description here enter image description here

this css side panel :

position: fixed; right: 0; top: 180px; height:calc(100% - 180px); 

hello not understand banner situation.. regarding need, can call js function whenever scroll:

<body>  <div class="content" onscroll="dynamicheight()"> </div>  <script> function dynamicheight() {     var content = document.getelementbyid("content");     var y = content.scrolltop;     document.getelementbyid('random').style.height = y; } </script> 

this way div id random grow according how scroll. have adjust wishes. hope guide bit.


Comments

Popular posts from this blog

Failed to execute goal org.apache.maven.plugins:maven-surefire-plugin:2.12:test (default-test) on project.Error occurred in starting fork -

windows - Debug iNetMgr.exe unhandle exception System.Management.Automation.CmdletInvocationException -

configurationsection - activeMq-5.13.3 setup configurations for wildfly 10.0.0 -