粘性页脚和动画答案

【问题标题】：Sticky Footer and Animation粘性页脚和动画
【发布时间】：2013-01-23 11:41:20
【问题描述】：

我在stackoverflow上找到了这个jsfiddle，但是这个人提供的解决方案非常跳跃。 http://jsfiddle.net/BramVanroy/ZVzEe/我需要非常流畅的东西。

var secondary = $("#secondary-footer");

secondary.hide().addClass("fixed").fadeIn("fast");

$(window).scroll(function() {
if (secondary.offset().top >= ($(document).height() - 350)) {
    secondary.removeClass("fixed");
}
else if(secondary + ":not('.fixed')") {
    secondary.addClass("fixed");
}
});

我需要粘性页脚工作的方式是让它在页面底部将页脚显示为一个窄条，同时仍然滚动浏览内容。滚动条到达页面底部后，页脚将扩大高度。

提供的 jsfiddle 非常接近我需要它的工作方式，但我需要一些非常流畅的东西。还有一点需要注意的是，完全展开的页脚的高度不是固定的。感谢大家的帮助。

【问题讨论】：

标签： javascript jquery footer sticky

【解决方案1】：

demo

jQuery

var secondary = $("#secondary-footer");

secondary.hide().addClass("fixed").fadeIn("fast");

$(window).scroll(function() {
    var scrollBottom = $(window).scrollTop() + $(window).height();

    $("#content").css("bottom",secondary.height());

    var maxHeight = 350; // set maximum height of the footer here
    var minHeight = 120; // set the minimum height of the footer here

    secondary.height(maxHeight - ($(document).height() - scrollBottom));
    if (secondary.height() <= minHeight) secondary.height(minHeight);
});

CSS

#content {
    width: 90%;
    margin: 0 auto;
    padding: 0.5em;
    background: #dedede;
    position:relative; /* added this */
}
#secondary-footer {
    width: 100%;
    height: 120px;
    background: #666;
    position: fixed;
    bottom: 0;
    left: 0;
}

/* removed #secondary-footer.fixed  and merged content with #secondary-footer */

【讨论】：

【解决方案2】：

另一种解决方案：http://jsfiddle.net/27rNu/

jQuery

$(document).ready(function() {
var secondary = $("#secondary-footer");
secondary.addClass("fixed");
var windowH = $('#wrapper').outerHeight(true);
$(window).scroll(function() {
    var scrollVal = $(this).scrollTop();
    if (scrollVal < (windowH - 350 * 2)) {
        secondary.addClass("fixed");
    }
    else {
        secondary.removeClass("fixed");
    }
});

});

我还在整个 html 周围添加了一个“包装器”div。

【讨论】：