Make left and right screen widgets stay in the same place while user scrolls down the page with spacebar

I have webpage with a large height attribute which displays products. I want the user to hit space bar to move the page down to view more开发者_StackOverflow中文版 products, but I need my screen widgets (shopping cart & categories) on the left and right to stay in the same place on the screen. And I don't want to use scrollbars. I assume this is a javascript request, can someone point me to a good resource for this?

There's no reason to use JavaScript here - CSS should do. Using position: fixed, you can fix the elements in your page such that they always remain in a certain position relative to the user's viewport. An example would probably illustrate this best: http://www.jsfiddle.net/yijiang/qtkss/

Further reading:

• http://reference.sitepoint.com/css/displaypositionfloat
• http://reference.sitepoint.com/css/display
• http://www.alistapart.com/articles/css-positioning-101/

You don't need javascript for this, just use position: fixed; in the widget's CSS and set the appropriate top, bottom, left, and right values on the widgets. That will position the widgets in a fixed location with respect to the browser window rather than other elements in the HTML.