I have two columns in my html content. The first column is a sidebar and is expected to be limited in content, while the second column is the actual content which can be several pages length.
What I'm trying to achieve is this: As I scroll the page, I want the first column to scroll till the point that the end of the first column content is visible, at which point the it should not scroll further as I scroll down. The second column should scroll all the way through, as the first column fixes at the point above. Note: When they do scroll, I need both columns to scroll together and not independently.
I tried using position:fixed with overflow-y: auto, but that doesn't seem to work. Please refer the jsFiddle here: http://jsfiddle.net/a1qn17gw/1/
.fixed-content {
position: fixed;
overflow-y: auto;
}
To illustrate, I'm trying to achieve the below as I scroll down the page:
