javascript - 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);
    });
});

已更新