javascript - 防止固定页脚和页眉重叠

Question

我终于把我的代码弄对了，为我正在处理的模板制作了一个固定的页眉和页脚，并根据窗口大小重新调整大小。当我调整窗口大小时，有没有办法让我的页眉和页脚相互接触。我的页眉高 190 像素，页脚高 134 像素。我需要诸如页脚位置何时距页面顶部 190px 之类的东西，以防止它变高

需要这样的东西：

if(window_size_height = 325px){
then stop resizing!}

或者

if(footer 325px from top){
then footer_y_position cannot go higher}

这是要测试的样本

http://jsfiddle.net/KYyB7/

编辑：

$(window).resize(function(){   
if($(window).height() < 435+$('#header').height()){
    $('#footer').css('position','relative');
} else {
    $('#footer').css('position','fixed');
}
});

Answer 1

您可以做的是使用我提到的 CSS3 媒体查询，或者您可以使用 JavaScript / jQuery。

这是在 jQuery 中执行此操作的一种方法：

$(window).resize(function(){   
    if($(window).height() < 325){
        $('#footer').css('position','relative');
    } else {
        $('#footer').css('position','fixed');
    }
});