Scroll two columns independently using the browsers scroll

I have 2 columns of content, the left content has some fixed content at the top with some text at the bottom, the right column is a big long list of text & small images. Currently when I vertically scroll the b开发者_如何学JAVArowser the content below the fixed content on the left scrolls with the content on the right.

What I want is, if the content on the left fits within the browse window, not to scroll, if it does have enough content, scroll with the right column, but stop before all the content hides behind the fixed content, but without stopping the right column from scrolling.

Not sure if this is even possible, can't recall having seen it done before.

Thanks, Chuck

---

something like this?: http://jsfiddle.net/S3xda/

things to be careful of:

• only tested in the latest FF and chrome
• not tested with contents of different length
• in that example, i'm using a fixed height wrapper, as i needed to attach the scroll() event to it but you could use window on your own page.

---

ZenMaster has the right idea. The other part of this I would do "overflow-y: auto" on the fixed div, this will make it have its own scroll bar if the content you have in it is higher than the browser window.

What else you can do is just absolutely position the stuff at the top, to top, left and then position the stuff at the bottom for bottom, left - And dont do anything more than a total of 500px high in that box and the content should never need to be scrolled, the bottom stuff will always be at the bottom of the window and likewise the top stuff will always be at the top, while your user can scroll the big section up and down with the other side staying constant and static on screen...

Well zenmaster removed his answer for some reason, I thought it was pretty good.

anyhow, you want the one column to either be position: fixed or you could do it with absolute positioning. Set the height to 100% (body must also be 100% and any other containers, you need the 100% height to bubble all the way to the "window" and not some container in between. Also if you do position absolute, remember that the container of the absolute element needs to be relative if you are giving positioning coordinates to the absolute element.

---

I would prefer a plugin like THIS in that way you get a scroll bar for each and not scrolling on both. GL & HF

And btw this works in all browsers ie7-9 ff,chrome,safari,opera and so on (even works on mobiles)

---

I had a same problem as you and finally I have found this jQuery plugin http://dhlavaty.github.io/jQuery-SmartColumnScroller/ . It has nice demo which shows exactly the solution. It moves all columns on scroll. However when a column content ends the column stops while other still go. TADA!