View Full Version : Help to create always visible scrolling sidebar

07-24-2012, 05:51 PM
Would like to get some help for something I'm trying to accomplish on a website. I'm not positive JavaScript is needed for it, but a few examples I saw of it did. Some sort of scroll follow function. I am still green in HTML and CSS, so there could be things I am missing there too that would help (simplified code pasted below).

What I want to accomplish can be seen on linked graphic. The top purple box is static at top of page. The orange box expands down when links are clicked. When different links are clicked, the yellow box has a script to show some additional links inside of it. I want this box to always be visible at the right, including when the viewer is at the bottom of the expanded orange area. Is there a simple script to help this? It would be at top of green-border box initially, but move to be at top of screen when scrolled down.

<div id="red_container" style="border:2px solid red; min-height:100%; padding:5px; position:relative; width:946px;">

<div id="purple_box" style="background-color:purple; float:left; height:300px; position:relative; width:946px;"></div>

<div id="green_container" style="border:2px solid green; float:left; margin-top:20px; padding:5px; position:relative; width:931px;">
<div id="expanding_orange" style="background-color:orange; float:left; min-height:900px; top:0px; width:710px;"></div>
<div id="floater" style="background-color:yellow; margin-left:10px; min-height:300px; position:absolute; top:7px; width:211px;"></div>