Question

我正在尝试在网页的左侧列中创建粘性页脚元素。右侧列将具有动态内容，因此我无法为任何元素设置精确高度（视口高度除外）。我想要发生的是页脚放置在视口下方，直到用户开始滚动，然后页脚元素固定在视口的底部。

我有一个分叉Fiddle可以工作，但如果内容高于导航则会中断内容。我也尝试使用Sticky Footer，但由于同样的问题，我无法将所有内容包装在一起。

到目前为止我发现了什么。

var $buzz = $('#buzz'),
    viewportHeight = $(window).height(),
    buzzHeight = 182,
    buzzTop = $buzz.offset().top + buzzHeight,
    buzzPosition = buzzTop - viewportHeight;

$(window).bind("resize.browsersize", function () {

    var viewportHeight = $(window).height(),
    buzzHeight = 182,
    buzzTop = $buzz.offset().top + buzzHeight,
    buzzPosition = buzzTop - viewportHeight;

}).trigger("resize.browsersize");

$(window).scroll(function () {

    if ($(window).scrollTop() >= buzzPosition) {
        $buzz.css({
            position: 'fixed',
            bottom: 0
        });   
    } else {
        $buzz.removeAttr("style");
    }

});

Answer 1

在导致左侧div调整大小的事件中，调用$(window).scroll();并重新定位粘性页脚。

$('.change').on('click', function () {
    $(this).css("height", "+=50px");
    $(window).scroll();
    return false;
});

滚动后视口底部的粘滞div

1 个答案: