semantic ui + jquery スクロールしたらじわっとフッター表示

by shigetak

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.css">
Semanticui　btn<br><br>
<a class="ui floated white button">
オトクな定期便を申し込む
<i class="right chevron icon"></i>
</a>

<pre>
ドラフト
文字を最前面にすればCSSだけでいけそう


<table class="top attached ui basic table">
        <tbody>
          <tr>
            <td>Cell1</td>
            <td>Cell2</td>
          </tr>
          <tr>
            <td>Cell1</td>
            <td>Cell2</td>
          </tr>
          <tr>
            <td>Cell1</td>
            <td>Cell2</td>
          </tr>
        </tbody>
      </table>

CSS

a {
  position: relative;
  display: inline-block;
  padding: .4em;
  text-decoration: none;
}
a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 35px;
  -webkit-transform: scaleX(0);
  -ms-transform: scaleX(0);
  transform: scaleX(0);
  background-color: red;
  -webkit-transition: all .3s ease;
  transition: all .3s ease;
  
}
a:hover::after {
  -webkit-transform: scaleX(1);
  -ms-transform: scaleX(1);
  transform: scaleX(1);
}