Fixing scrolling behaviour with jQuery

Question

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 gaping white space where the right column is empty.

Live site example using mootools: https://w3-markup.com/order - look at the order summary box as you scroll up and down.

Any advice / suggestions about how to do this in jQuery?

Thanks!

Answer 1

The "effect" you are looking for can be achieved with some simple CSS. Using position: fixed, it is possible to make the element stay in place while the user scrolls down the page. You can then position the element with top, right, bottom and left relative to the viewport. Something like

#contact {
  postion: fixed;
}

Will do.