当用户使用空格键向下滚动页面时，使左右屏幕小部件保持在同一位置

Question

我的网页具有较大的高度属性，可显示产品。我希望用户点击空格键以向下移动页面以查看更多产品，但我需要左右两侧的屏幕小部件（购物车和类别）以保持在屏幕上的相同位置。而且我不想使用滚动条。我认为这是一个javascript请求，有人能指出我这个好资源吗？

Answer 1

这里没有理由使用JavaScript - CSS应该这样做。使用position: fixed，您可以修复页面中的元素，使它们始终保持在相对于用户视口的特定位置。一个例子可能会说明这一点：http://www.jsfiddle.net/yijiang/qtkss/

进一步阅读：

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

Answer 2

您不需要使用javascript，只需在小部件的CSS中使用position: fixed;并设置相应的top，bottom，left和{{1}小部件上的值。这将把小部件放在相对于浏览器窗口的固定位置，而不是HTML中的其他元素。