Javascript 滚动后视口底部的粘滞div

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

我有一个叉子，它可以工作，但如果它比导航高，它会破坏内容。我也尝试过使用，但由于同一个问题，我无法将所有内容打包在一起

到目前为止我发现了什么

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

});

---

在导致左侧div调整大小的事件中，调用

$（window）.scroll（），它将重新定位粘性页脚

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

你有活生生的例子吗？这里有一个更好的例子来说明我需要什么。这个例子很有效，只是我需要元素一碰到视口底部就粘住，而不是一直滚动到顶部然后出现在底部。这是一个更好的例子，我需要什么。这个例子很有效，只是我需要元素一碰到视口底部就粘住，而不是一直滚动到顶部然后出现在底部。jsfiddle.net/3vffmu3p