Search code examples
javascriptcsspositioning

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 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?


Solution

  • 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: