Прокрутка блоков с фиксацией заголовка

by yoowordpress

HTML

<div class="scroll-main-group">
    <div class="papa">
    <div class='scroll-group'>
        <div class="scroll-group-head">Группа 1</div> 
        <div class="scroll-group-body">Введите JavaScript, затем щёлкните правой кнопкой или выберите из меню Выполнить:* 1. Запустить, чтобы исполнить выделенный текст (Ctrl+R),* 2. Исследовать, чтобы вызвать для результата Инспектор Объектов (Ctrl+I), или,* 3. Отобразить, чтобы вставить результат в комментарий после выделения. (Ctrl+L)
        </div>
    </div>  
            <div class='scroll-group'>
                <div class="scroll-group-head">Группа 2</div> 
        <div class="scroll-group-body">Введите JavaScript, затем щёлкните правой кнопкой или выберите из меню Выполнить:* 1. Запустить, чтобы исполнить выделенный текст (Ctrl+R),* 2. Исследовать, чтобы вызвать для результата Инспектор Объектов (Ctrl+I), или,* 3. Отобразить, чтобы вставить результат в комментарий после выделения. (Ctrl+L)
                </div>
    </div>  
            <div class='scroll-group'>
                <div class="scroll-group-head">Группа 3</div> 
        <div class="scroll-group-body">Введите JavaScript, затем щёлкните правой кнопкой или выберите из меню Выполнить:* 1. Запустить, чтобы исполнить выделенный текст (Ctrl+R),* 2. Исследовать, чтобы вызвать для результата Инспектор Объектов (Ctrl+I), или,* 3. Отобразить, чтобы вставить результат в комментарий после выделения. (Ctrl+L)
                </div>
    </div>  <div class='scroll-group'>
    <div class="scroll-group-head">Группа 4</div> 
        <div class="scroll-group-body">Введите JavaScript, затем щёлкните правой кнопкой или выберите из меню Выполнить:* 1. Запустить, чтобы исполнить выделенный текст (Ctrl+R),* 2. Исследовать, чтобы вызвать для результата Инспектор Объектов (Ctrl+I), или,* 3. Отобразить, чтобы вставить результат в комментарий после выделения. (Ctrl+L)
    </div>
    </div>  <div class='scroll-group'>
    <div class="scroll-group-head">Группа 5</div> 
        <div...

CSS

.scroll-main-group {
    height: 600px;
   overflow-y: scroll;
    width: 300px;
}
.papa{height:100%;}
.scroll-group {
    position: relative;
}
.scroll-group-head {
    position: absolute;
    height: 30px;
    border: 1px solid;
    width: 100%;
    background-color: #eee;
}
.scroll-group-body {
    padding: 35px 0 12px 0;
}

JavaScript

(function($) {
  var win = $('.scroll-main-group');

  $.fn.stick_panda = function(opts) {
    var elm, inner_scrolling, offset_top, parent_selector, sticky_class, _fn, _i, _len;
    if (opts == null) {
      opts = {};
    }
    sticky_class = opts.sticky_class, inner_scrolling = opts.inner_scrolling, parent_selector = opts.parent, offset_top = opts.offset_top;
    if (offset_top == null) {
      offset_top = 0;
    }
    if (parent_selector == null) {
      parent_selector = void 0;
    }
    if (inner_scrolling == null) {
      inner_scrolling = true;
    }
    if (sticky_class == null) {
      sticky_class = "is_stuck";
    }
    _fn = function(elm, padding_bottom, parent_top, parent_height, top, height, el_float) {
      var bottomed, detach, fixed, last_pos, offset, parent, recalc, recalc_and_tick, spacer, tick;
      if (elm.data("sticky_kit")) {
        return;
      }
      elm.data("sticky_kit", true);
      parent = elm.parent();
      if (parent_selector != null) {
        parent = parent.closest(parent_selector);
      }
      if (!parent.length) {
        throw "failed to find stick parent";
      }
      fixed = false;
      bottomed = false;
      spacer = $("<div />");
      spacer.css('position', elm.css('position'));
      recalc = function() {
        var border_top, padding_top, restore;
        border_top = parseInt(parent.css("border-top-width"), 10);
        padding_top = parseInt(parent.css("padding-top"), 10);
        padding_bottom = parseInt(parent.css("padding-bottom"), 10);
        parent_top = parent.offset().top + border_top + padding_top;
        parent_height = parent.height();
        restore = fixed ? (fixed = false, bottomed = false, elm.insertAfter(spacer).css({
          position: "",
          top: "",
          width: "",
          bottom: ""
        }), spacer.detach(), true) : void 0;
        top = elm.offset().top - parseInt(elm.css("margin-top"), 10) - offset_top;
        height = elm.outerHeight(true);
       ...