html - 防止固定边栏内的粘性页脚重叠

Question

我们的网站有一个固定的侧边栏，包含一个粘性页脚。在浏览器高度大于侧边栏内容高度的显示器上查看时效果很好，但在较小的显示器上页脚被“截断”。

为了解决这个问题，我添加了一个媒体查询，它会将页脚更改为相对位于侧边栏内的位置，并在侧边栏上设置 overflow: auto:

/* sidebar padding + menu height + footer height */
@media screen and (max-height: 580px) {
    .sidebar .footer {
        position: relative;
    }
}

虽然这至少允许在较小的显示器上查看完整的侧边栏内容，但这也意味着我们最终会在侧边栏上有一个滚动条，这看起来不太好。

我希望发生的情况是，如果浏览器视口(viewport)小于边栏内容的高度，您应该能够使用普通页面滚动条滚动以查看所有内容。

我想这可以通过媒体查询来更改侧边栏的 position 但我似乎无法弄清楚。

• 摆弄完整代码:http://jsfiddle.net/benfosterdev/pRBgT/
• 展示问题的全屏结果:http://fiddle.jshell.net/benfosterdev/pRBgT/show/light/

Answer 1

我不确定这是否可以用纯 CSS 来实现，因为你所描述的是一个媒体查询，它指定“如果视口(viewport)高度低于 580 像素，固定侧边栏位置直到一定的滚动距离，然后定位它是静态的”。滚动是一种超出媒体查询范围的属性。

以 Brad 的回答为基础 - 这是使用 jQuery 的快速方法

jsFiddle example

$(document).scroll(function(){    
    if ($(window).height()<=580){
        var sidebarObj=$(".sidebar");
        var extraSidebar=sidebarObj.height()-$(window).height();        
        if ($(document).scrollTop()>extraSidebar){            
            if (sidebarObj.css("position")!="fixed"){
                sidebarObj.css({
                    "position": "fixed",
                    "top": -extraSidebar+"px"
                });
            }
        }
        else{
            sidebarObj.css({
                "position": "static",
                "top": 0+"px"
            });
        }
    }
});