Question

出于某种原因，你需要在jsfiddle中拖动窗口以使其运行，但它在上下文中的onLoad工作正常。

这背后的想法是，如果内容超过窗口的高度，它将removeClass“.sticky”，它将页脚向下压缩到页面底部。否则，它是一个粘性的页脚。

它应该非常优雅。我的问题是，片刻会剪掉内容。当部分[role =“main”]的浅绿色背景符合页脚的紫色背景而不是后面的像素时，我希望它删除类“.sticky”。我似乎无法实现这一目标。

页脚总是相同的高度...我可以从某个东西中减去它吗？

$(document).ready(function(){
$('aside[role="sidebar"]').height($(window).height());

if( $('section[role="main"]').height() >= $(window).height() ) {
    $('.footer').removeClass('sticky');
}

$(window).resize(function(){
    $('aside[role="sidebar"]').height($(window).height());

    if( $('section[role="main"]').height() <= $(window).height() ) {
        $('.footer').addClass('sticky');
    }
    else {
        $('.footer').removeClass('sticky');
    }
});
});

此处的工作示例： http://jsfiddle.net/LxvQ9/确保调整大小以使其初始化。再次，这是jsFiddle的一些问题。在我的网站onLoad上正常工作。

感谢您的帮助。

Answer 1

在计算任何元素的height时，我们还需要考虑padding和border（如果有的话）。

在jQuery中，我们使用outerHeight来获取包含padding和border在内的任何元素的高度。

所以，在你的情况下，我们只使用height，这就是为什么有些文字是剪辑的。

使用以下代码正确计算height并更新页脚类。

JavaScript代码

$(function(){
    //When Window is Resized
    $(window).resize(makeFooterSticky);
    //Run once on page load
    mkaeFooterSticky();
});

function makeFooterSticky() {

    $('aside[role="sidebar"]').height($(window).height());

    if( $('section[role="main"]').outerHeight() <= $(window).height() - $('.footer').outerHeight() ) {
        $('.footer').addClass('sticky');
    } else {
        $('.footer').removeClass('sticky');
    }
}

希望这应该有用。

如果有任何问题，请告诉我。

JSFiddle演示：http://jsfiddle.net/hVzat/3/

如何改进这个粘性页脚代码＆amp;解决一个小问题？

1 个答案: