Jquery 滚动条上的两个粘性元素-主容器问题上的最大宽度

我已经使用jQuery设置了一个粘滞菜单元素，效果很好，但我还需要增加一个粘滞元素，棘手的是这是一个浮动元素——基本上是博客项目的元边栏——它需要相对于我提到的粘滞菜单条保持粘滞。我一直在研究这个问题，但不确定最简洁的处理方法——下面是对JSFIDLE的一次尝试

这里的问题是，浮动博客边栏的containing div设置了一个max width，当您向上滚动边栏时，边栏的宽度会增加。我不太清楚为什么会发生这种情况——有什么好主意吗

包装容器CSS：

.body {
    margin-top: 50px
    clear: both;
    max-width: 450px;
    margin: 0 auto;
}

这不是最好的解决方案，但效果很好：D

        jQuery(document).ready(function ($) 
        {
            var menu = $('.nav-wrapper');
            var blogMeta = $('.blog-meta');
            var stickyOffset = menu.offset().top;
            var maxwidth = blogMeta.width();
            $(window).scroll(function () {
                var scroll = $(window).scrollTop();

                if (scroll >= stickyOffset) 
                {
                    menu.addClass('sticky');
                    blogMeta.addClass('sticky');
                    blogMeta.css("max-width",maxwidth+"px");
                }
                else {
                    menu.removeClass('sticky');
                    blogMeta.removeClass('sticky');
                    blogMeta.css("max-width","initial");
                }
            });
        });