HTML: Autoscroll合并表

Question

我得到了一个表，第一行被合并了，并显示了一个图像：

​

​

当页面向下滚动时，如何使图像自动滚动，使图像始终位于可见(！)的中间。桌子？

    <table>
  <tr>
    <th rowspan="10">Image</th>
    <th>c</th>
    <th>c</th>
  </tr>
  <tr>
    <td>c</td>
    <td>c</td>
  </tr>
  <tr>
    <td>c</td>
    <td>c</td>
  </tr>
  <tr>
    <td>c</td>
    <td>c</td>
  </tr>
  <tr>
    <td>c</td>
    <td>c</td>
  </tr>
  <tr>
    <td>c</td>
    <td>c</td>
  </tr>
  <tr>
    <td>c</td>
    <td>c</td>
  </tr>
  <tr>
    <td>c</td>
    <td>c</td>
  </tr>
  <tr>
    <td>c</td>
    <td>c</td>
  </tr>
  <tr>
    <td>c</td>
    <td></td>
  </tr>
</table>

Answer 1

使用Jquery函数scrollTop()并处理滚动事件上的，请参阅工频：

$(function($) {
    var image = $('.follow-scroll');
    var originalPosition = image.offset().top;

    // Space between element and top of screen (when scrolling)
    var topSpace = 15;

    // Should probably be set in CSS; but here just for emphasis
    image.css('position', 'relative');

    $(window).on('scroll', function(event) {
        var scrollTop = $(window).scrollTop();

        image.stop(false, false).animate({
            top: scrollTop < originalPosition ? 0: scrollTop - originalPosition + topSpace
        }, 300);
    });
});

更新