滚动后视口底部的粘性div

Question

我试图创建一个粘页脚元素在一个网页的左列。右边的列将有动态内容，所以我不能给任何元素设置精确的高度(除了视口高度)。我想要发生的是footer被放置在视口下方，直到用户开始滚动，然后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;
});