粘贴侧边栏|内容高度问题

Question

当您向下滚动页面时，我想创建一个关注您的侧边栏或部分。

工作正常，但如果内容的高度比leftsidebar短，页面变得不光滑，结构破坏。如何解决？！

$(function () {

        var msie6 = $.browser == 'msie' && $.browser.version < 7;

        if (!msie6 && $('.sidebar').offset() != null) {
            var top = $('.sidebar').offset().top - parseFloat($('.sidebar').css('margin-top').replace(/auto/, 0));
            var height = $('.sidebar').height();
            var winHeight = $(window).height();
            var footerTop = $('#footer').offset().top - parseFloat($('#footer').css('margin-top').replace(/auto/, 0));
            var gap = 0;
            $(window).scroll(function (event) {
                // what the y position of the scroll is
                var y = $(this).scrollTop();

                // whether that's below the form
                if (y + winHeight >= top + height + gap && y + winHeight <= footerTop) {
                    // if so, ad the fixed class
                    $('.sidebar').addClass('leftsidebarfixed').css('top', winHeight - height - gap + 'px');
                }
                else if (y + winHeight > footerTop) {
                    // if so, ad the fixed class
                    $('.sidebar').addClass('leftsidebarfixed').css('top', footerTop - height - y - gap + 'px');
                }
                else {
                    // otherwise remove it
                    $('.sidebar').removeClass('leftsidebarfixed').css('top', '0px');
                }
            });
        }
    });

.scrollable {
        height: 100%;
        overflow: auto;
    }
    .max-height {
        height: 100%;

    }
    .no-overflow {
        overflow: hidden;
    }
    .sidebar {
        display: none;
    }
    @media (min-width: 768px) {
        .sidebar {
            position: absolute;
            top: 0;
            height: 100vh;
            bottom: 0;
            left: 0;
            z-index: 1000;
            display: block;
            overflow-x: auto;
            overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
            background-color: #f5f5f5;
        }
    }
    .main {
        padding-top: 20px;
        height:auto;

    }
    @media (min-width: 768px) {
        .main {
            padding-right: 20px;
            padding-left: 20px;

        }
    }
    .table{
        font-size:x-small;
    }
    .HeaderStyle th{
        text-align:center; /*Заголовки в таблице стоят по центру*/
        background-color:#FFDEAD;
    }

    #wrapper {
        margin: 0 auto;
        width: 100%;
    }
    #contentHolder{
        position:relative;
    }
    #header,#footer {
        background: none repeat scroll 0 0 #CCFFFF;
        color: #000000;
        height: 150px;
        width: 100%;
        clear:both;
        font-size:3em;
        text-align:center;
    }
    .leftsidebarfixed {
        position: fixed;
        top: 0;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
  <div id="header">...</div>
  <div class="container-fluid max-height no-overflow">
      <div class ="row max-height">
          <div id="contentHolder">
              <form runat="server">
                <!--sidebar-->
                <div runat="server" class="col-sm-3 sidebar">       

                </div>    
                <!--MAIN CONTENT-->
                <div class="col-sm-offset-3 main scrollable">
                    
                </div>
              </form>
          </div>
        </div>
    </div>
  <div id="footer">...</div>
</div>

问题：

enhanced promises