Как заставить внутренний DIV двигаться с помощью положения прокрутки внешнего DIV без фиксированной ширины

У меня есть серия элементов DIV, которые составляют диаграмму. Основное внимание уделяется всему, что содержится в "rightPanel" в приведенном ниже коде.

topPanel имеет абсолютную позицию, и его верхнее значение (верх: 0px) необходимо изменить при прокрутке правой панели DIV. Кажется, что мой jQuery верен, но он не стреляет в событие прокрутки rightPanel. См. Следующий код:

HTML

Main
  <div class="mainContent">
    <div class="leftPanel"> Left Panel
    </div>
    <div class="rightPanel">Right Panel
      <div class="dataPanel">Data Panel
        <div class="topPanel">Top
        </div>
        <div class="bottomPanel">
            &nbsp;
            <p>Data Data Data Data Data</p>
        </div>
      </div>
    </div>

CSS

.mainContent
{
    width: 100%;
    max-height: 500px;
    overflow: hidden;
    overflow-y: scroll !important;
    position: relative;
    border: solid 3px blue;
}
.leftPanel
{
    width: 225px;
    position: relative;
    overflow: hidden;
    border: solid 3px pink;
    float: left;
}
.rightPanel
{
    overflow: hidden;
    border: solid 3px orange;
}
.dataPanel
{
    width:21355px;
    height: 3253px;
    border: solid 3px yellow;
}
.topPanel
{
    position: absolute;
    width: 21355px;
    border: solid 4px purple;

}
.bottomPanel
{
    clear:both;
    border: solid red 3px;
}

JQuery

var sOffset = $(".topPanel").offset().top;
var shareheight = $(".topPanel").height() + 43;
$(".rightPanel").scroll(function() {
    alert('in the function');
    var scrollYpos = $(document).scrollTop();
    if (scrollYpos > sOffset - shareheight) {
        alert('inside');
        $(".topPanel").css({
            'top': '61px',

        });
    } else {
        alert('else');
        $(".topPanel").css({
        'top': 'auto',

        });
    }
});

И вот моя скрипка http://jsfiddle.net/LH7g7/