Javascript 如何改进此粘性页脚代码&；解决一个小问题？

出于某种原因，您需要在JSFIDLE中拖动窗口以使其运行，但它在上下文中加载时运行良好

这背后的想法是，如果内容超过了窗口的高度，它将删除class“.sticky”，这会将页脚猛击到页面底部。否则，它的页脚很粘

它应该很优雅。我的问题是，有一段时间，页脚剪掉了内容。我希望当[role=“main”]部分的浅绿色背景与页脚的紫色背景相接时，而不是一个像素后，删除class“.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');
    }
});
});

$（文档）.ready（函数（）{
$（'aside[role=“sidebar”]'）.height（$（window.height（））；
如果（$（'section[role=“main”]'）.height（）>=$（window.height（））{
$（'.footer'）.removeClass（'sticky'）；
}
$（窗口）。调整大小（函数（）{
$（'aside[role=“sidebar”]'）.height（$（window.height（））；
如果（$ [段[角色] =“主”]）.Head（），在计算任何元素的<代码>高度> />代码时，我们还需要考虑<代码>填充> <代码>和<代码>边框< /代码>，如果有的话，

在jQuery中，我们使用
outerHeight
来获取任何元素的高度，包括
填充
和
边框

因此，在您的例子中，我们只使用
高度
，这就是为什么一些文本被剪切

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

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');
    }
}

$（函数（）{
//调整窗口大小时
$（窗口）。调整大小（使页脚粘滞）；
//在页面加载时运行一次
mkaefooterstick（）；
});
函数makeFooterSticky（）{
$（'aside[role=“sidebar”]'）.height（$（window.height（））；
if（$（'section[role=“main”]”）。outerHeight（）