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

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

  <div id="footerFloatingMenu">
      <div class="ui segment">
        <div class="ui title">
         <p id="total">¥0円</p>
         <p id="total2">¥0円</p>
        </div>
      </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();
    }
  });
});