0

私はこのjsfiddleをstackoverflowで見つけましたが、その人が提供する解決策は非常にびくびくしています。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

別の解決策：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を追加しました。

于 2013-02-07T21:47:03.780 に答える