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

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 和 right 值。这会将小部件定位在相对于浏览器窗口而不是 HTML 中的其他元素的固定位置。