HTML：自动滚动合并表

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（）并处理滚动事件请参阅Working Fiddle：

$(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);
    });
});

<强>已更新