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

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">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lazyload.js"></script>
<h4 class="ui block header">footer Floating Menu,
resposive + semantic ui + jquery <br>
スクロールしたらじわっとフッター表示</h4>
<div class="ui divided items  ">
    <!--img class="ui fluid image" src="http://rcart.eek.jp/used/img/sp/kvsp1_1026.jpg" -->
    <img class="ui fluid image " src="http://rcart.eek.jp/used/img/kv1_1026.png" style="background:red">




  <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 right floated primary button">
          Buy tickets１
          <i class="right chevron icon"></i>
        </div>
        <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">
<img class="ui fluid image" src="https://semantic-ui.com/images/wireframe/image.png" data-src="http://rcart.eek.jp/used/img/sp/kvsp1_1026.jpg">
      
    </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...

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

//$('.item .image img')
$('.item img1111111')
  .visibility({
  type       : 'image',
  transition : 'fade in',
  duration   : 3000
});

// Lazy Loadを起動する
$('img.lazyload.image').lazyload();
//lazyload();

$('.item')
  .visibility({
    once: false,
    // update size when new content loads
    observeChanges: true,
    // load content on bottom edge visible
    onBottomVisible: function() {
      // loads a max of 5 times
      window.loadFakeContent();
    }
  })
;


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