Question

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

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

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

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

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

Answer 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中不起作用，IE6几乎绝种，也不适用于任何移动浏览器。实际上，您应该使用媒体查询来覆盖移动浏览器的这些样式。这样的事情可能有用：

@media screen and (max-device-width: 500px)
{
    body
    {
        margin-top: 8px;
        margin-bottom: 8px;
    }
    .header, .footer
    {
        position: static;  /* or maybe relative */
    }
}

当页面滚动时div会滚动并且是否有专门为此编写的库？

1 个答案: