title: How to make an inner DIV move with an outer DIV's scroll position not using fixed width
body: <p>I have a series of DIV elements that makeup a chart.  The main focus is everything contained within "rightPanel" in the code below.</p>
  
  <p>topPanel has an absolute position and its top value (top: 0px) needs to change when scrolling the rightPanel DIV.  It seems as though my jQuery is correct but it's not firing on the rightPanel scroll event.  See the code below:</p>
  
  <p>HTML</p>
  
  <pre><code>Main
    &lt;div class="mainContent"&gt;
      &lt;div class="leftPanel"&gt; Left Panel
      &lt;/div&gt;
      &lt;div class="rightPanel"&gt;Right Panel
        &lt;div class="dataPanel"&gt;Data Panel
          &lt;div class="topPanel"&gt;Top
          &lt;/div&gt;
          &lt;div class="bottomPanel"&gt;
              &amp;nbsp;
              &lt;p&gt;Data Data Data Data Data&lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.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;
  }
  </code></pre>
  
  <p>jQuery</p>
  
  <pre><code>var sOffset = $(".topPanel").offset().top;
  var shareheight = $(".topPanel").height() + 43;
  $(".rightPanel").scroll(function() {
      alert('in the function');
      var scrollYpos = $(document).scrollTop();
      if (scrollYpos &gt; sOffset - shareheight) {
          alert('inside');
          $(".topPanel").css({
              'top': '61px',
  
          });
      } else {
          alert('else');
          $(".topPanel").css({
          'top': 'auto',
  
          });
      }
  });
  </code></pre>
  
  <p>And here is my fiddle <a href="http://jsfiddle.net/LH7g7/" rel="nofollow">http://jsfiddle.net/LH7g7/</a></p>