javascript - 滚动后视口(viewport)底部的粘性 div

Question

我正在尝试在网页的左侧栏中创建一个粘性页脚 元素。右侧的列将包含动态内容，因此我无法为任何元素设置准确的高度(视口(viewport)高度除外)。我希望发生的事情是将 页脚 放置在视口(viewport)下方，直到用户开始滚动，然后将 footer 元素固定在视口(viewport)底部。

我有一个 fork 的 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;
});