Question

请您查看This Demo，让我知道如何在#map添加动画以便在视图端口中始终在视图端口上看到动画？（有些像粘滞便笺）

正如您所见，#map的位置在-100px处的硬编码位于：

transform: rotate(-90deg) translate(-100px, -30px);

但我需要做的是将#map保留在视口中，直到表格仍然向下滚动或向上滚动

＆＃13;

$(function() {
  
});

＆＃13;

@import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css");
#map {
  display: inline-block;
  transform: rotate(-90deg) translate(-100px, -30px);
  color: #ed217c;
  white-space: nowrap;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="height:300px; background:yellow">Scrool Drown Please</div>
<table class="table">
  <tr>
    <td rowspan="28"><span id="map">New Users</span></td>
  </tr>
  <tr>
    <td>555 77 855</td>
  </tr>
  <tr>
    <td>555 77 855</td>
  </tr>
   <tr>
    <td>555 77 855</td>
  </tr>
   <tr>
    <td>555 77 855</td>
  </tr>
    <tr>
    <td>555 77 855</td>
  </tr>
    <tr>
    <td>555 77 855</td>
  </tr>
    <tr>
    <td>555 77 855</td>
  </tr>
    <tr>
    <td>555 77 855</td>
  </tr>
    <tr>
    <td>555 77 855</td>
  </tr>  <tr>
    <td>555 77 855</td>
  </tr>  <tr>
    <td>555 77 855</td>
  </tr>  <tr>
    <td>555 77 855</td>
  </tr>  <tr>
    <td>555 77 855</td>
  </tr>  <tr>
    <td>555 77 855</td>
  </tr>  <tr>
    <td>555 77 855</td>
  </tr>  
  <tr>
    <td>555 77 855</td>
  </tr>
  <tr>
    <td>555 77 855</td>
  </tr>  <tr>
    <td>555 77 855</td>
  </tr>  <tr>
    <td>555 77 855</td>
  </tr>  <tr>
    <td>555 77 855</td>
  </tr>  <tr>
    <td>555 77 855</td>
  </tr>  <tr>
    <td>555 77 855</td>
  </tr>  <tr>
    <td>555 77 855</td>
  </tr>  <tr>
    <td>555 77 855</td>
  </tr>  <tr>
    <td>555 77 855</td>
  </tr>  <tr>
    <td>555 77 855</td>
  </tr>  <tr>
    <td>555 77 855</td>
  </tr>
</table>
<div style="height:300px;background:yellow"">Scroll Up Please</div>

＆＃13;

Answer 1

使用$（window）.scroll（callback）我更新了一些内容 jsfiddle.net/5sb7ymt0/2 /

如何在Scroll上的合并表列中将动画添加到已翻译的框中

1 个答案: