Question

我在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非常接近我需要它的工作方式，但我需要非常流畅的东西。另外注意，完全展开的页脚的高度不固定。感谢大家的帮助。

Answer 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 */

Answer 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。

粘滞页脚和动画

2 个答案: