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">
<h3 class="ui block header">footer Floating Menu,
resposive + semantic ui + jquery <br>
スクロールしたらじわっとフッター表示</h3>

<div class="ui divided items container segment">
  <div class="item">
    <div class="image">
      <img src="https://semantic-ui.com/images/wireframe/image.png">
    </div>
    <div class="content">
      <a class="header">12 Years a Slave</a>
      <div class="meta">
        <span class="cinema">Union Square 14</span>
      </div>
      <div class="description">
        <p></p>
      </div>
      <div class="extra">
        <div class="ui label">IMAX</div>
        <div class="ui label"><i class="globe icon"></i> Additional Languages</div>
      </div>
    </div>
  </div>
  <div class="item">
    <div class="image">
      <img src="https://semantic-ui.com/images/wireframe/image.png">
    </div>
    <div class="content">
      <a class="header">My Neighbor Totoro</a>
      <div class="meta">
        <span class="cinema">IFC Cinema</span>
      </div>
      <div class="description">
        <p></p>
      </div>
      <div class="extra">
        <div class="ui right floated primary button">
          Buy tickets
          <i class="right chevron icon"></i>
        </div>
        <div class="ui label">Limited</div>
      </div>
    </div>
  </div>
  <div class="item">
    <div class="image">
      <img src="https://semantic-ui.com/images/wireframe/image.png">
    </div>
    <div class="content">
      <a class="header">Watchmen</a>
      <div class="meta">
        <span class="cinema">IFC</span>
      </div>
      <div class="description">
        <p></p>
      </div>
      <div class="extra">
        <div class="ui right floated primary button">
          Buy tickets
          <i class="right chevron icon"></i>
        </div>
      </div>
    </div>
 ...

CSS

#footerFloatingMenu .ui.segment {
  background: red;
}

#footerFloatingMenu {
  background: yellow;
  display: block;
  width: 100%;
  position: fixed;
  left: 0px;
  bottom: 2px;
  z-index: 9999;
  text-align: center;
  padding: 0 auto;
}

#footerFloatingMenu img {
  max-width: 99%;
}

JavaScript

jQuery(function() {
  var topBtn = jQuery('#footerFloatingMenu');
  topBtn.hide();
  jQuery(window).scroll(function() {
    // 200pxで表示
    if (jQuery(this).scrollTop() > 200) {
      topBtn.fadeIn();
    } else {
      topBtn.fadeOut();
    }
  });
});