0

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

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

它应该很优雅。我的问题是，页脚会暂时剪掉内容。当 section[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');
    }
});
});

此处的工作示例：http: //jsfiddle.net/LxvQ9/确保调整大小以使其开始运行。同样，这是 jsFiddle 的一些问题。在我的网站 onLoad 上运行良好。

谢谢你的帮助。

4

1 回答 1

0

在计算任何元素时，height我们还需要考虑如果有的话。paddingborder

在 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/

于 2013-08-06T08:58:31.237 回答