scrollPopup.js

スクリプト

• ポップアップ表示したい要素を$scrollPopupで取得する
• targetElemで取得した要素が表示されたときにポップアップ表示される

$(function() {
  var $scrollPopup = $('.scrollPopup');
  var state = 'is-active';
  $scrollPopup.each(function() {
    var $this = $(this);

    function scrollPopup() {
      // 現在のスクロール位置を取得する。
      var getScrolling = $(document).scrollTop();
      // ドキュメントの高さを取得する。
      var documentHeight = $(document).height();
      // フッターの高さを取得する。
      var targetElem = $('.footer').outerHeight();
      // 画面の高さ
      var screenHeight = $(window).height();
      // targetElemが表示されるスクロール量で要素を表示する。
      var displayPos = documentHeight - screenHeight　- targetElem;

      if(getScrolling > displayPos) {
        $this.addClass(state);
      } else {
        $this.removeClass(state);
      }
    }
    scrollPopup();
    $(window).on('scroll resize', function() {
      scrollPopup();
    });
  });

CSSで要素の表示と動きを管理する。rightとleftが0でmarginがautoの場合、中央配置になる。opacityとvisibilityで表示をtransitionで調整できる。

.scrollPopup {
  opacity: 0;
  visibility: visible;
  position: fixed;
  right: 0;
  bottom: 50%;
  left: 200%;
  width: 80%;
  max-width: 300px;
  margin: auto;
  transition-duration: 1s;
  &.is-active {
    opacity: 1;
    visibility: visible;
    right: 0;
    left: 0;
  }
}