Controlling column scrolling behaviour in jQuery?

Controlling column scrolling behaviour in jQuery?

So I have a page that is split into 2 columns. The left column there are expandable forms that are quite long to ask the user optional product preferences. On the right side of the page there is a much shorter, 'contact details' form. The contact details form is mandatory.

The behaviour idea is that as the user scrolls down to complete the left column optional forms, the page will only scroll the left column - the contact details forms displayed in the right column stays in place to avoid a big white space where the right column is empty.

Example of what specifically I'm trying to do: http://lajm.eu/emil/dump/pos.html

Live site example using mootools: https://w3-markup.com/order

Any advice / suggestions? 

Thanks!