0

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

4

2 回答 2

1

演示

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 */
于 2013-02-07T21:43:11.457 回答
0

Another solution: 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");
    }
});

});

I also added a "wrapper" div around the whole html.

于 2013-02-07T21:47:03.780 回答