0

我正在尝试查找有关在页面滚动时在页面内滚动并具有上限和下限的元素的更多信息。

具体来说，我正在尝试添加在页面滚动时在页眉和页脚范围内滚动辅助内容部分（侧边栏）的功能。

例如，Apple 在选择要包含的产品功能时在商店中使用它 - http://store.apple.com/us/configure/MD093LL/A。

我能够重新创建此功能，但我敢打赌，在 stackoverflow 的帮助下，我可以找到经过更彻底测试、跨浏览器兼容等的代码。

理想情况下，我希望找到可以自己运行的东西，而不是像 jQuery 这样更大的库的一部分。这只是一个偏好，但我对包括 jQuery 类型库的潜在解决方案持开放态度......

4

1 回答 1

1

你只需要 CSS position: fixed，：

body
{
    margin-top: 150px; /* header height */
    margin-bottom: 250px; /* footer height */
}
.header, .footer
{
    position: fixed;
    left: 0;
    right: 0;
}
.header
{
    top: 0;
}
.footer
{
    bottom: 0;
}

这适用于所有相关的桌面浏览器。它在几乎绝迹的 IE6 中不起作用，在任何移动浏览器中也不起作用。事实上，您应该使用媒体查询来覆盖移动浏览器的这些样式。像这样的东西可能会起作用：

@media screen and (max-device-width: 500px)
{
    body
    {
        margin-top: 8px;
        margin-bottom: 8px;
    }
    .header, .footer
    {
        position: static;  /* or maybe relative */
    }
}
于 2013-01-10T18:53:01.137 回答