jQueryでフッター上部でとまるパーツ

ページの先頭へボタン（ページトップ）へ戻るボタンなどに使える

HTML

<footer id="js-footer" class="footer">
</footer>	
<div id="js-bottom-parts" class="bottom-parts"></div>

CSS

body {
    position: relative;
}

.bottom-parts {
    position: fixed;
    right: 0;
    bottom: 0;
    z-index: 1;
    width: 100%;
    opacity: 0;
    transform: translateY(100px);

    &__inner {
        display: flex;
        align-items: end;
        justify-content: space-between;

    }

    &.is-up {
        animation: upAnime 0.5s forwards;
    }

    &.is-down {
        animation: downAnime 0.5s forwards;
    }
}

@keyframes upAnime{
    from {
        opacity: 0;
        transform: translateY(100px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes downAnime{
    from {
        opacity: 1;
        transform: translateY(0);
    }

    to {
        opacity: 1;
        transform: translateY(100px);
    }
}

jQuery

function bottomPartsAnime() {
  var $window = $(window);
  var $document = $(document);
  var $bottomParts = $("#js-bottom-parts");
  var $footer = $("#js-footer");
  function handleScroll() {
    var scroll = $window.scrollTop();
    var scrollHeight = $document.height();
    var windowHeight = $window.height();
    var footHeight = $footer.innerHeight();
    var scrollPosition = windowHeight + scroll;

    if (scroll >= 200) {
    $bottomParts.removeClass('is-down').addClass('is-up');
    } else if ($bottomParts.hasClass('is-up')) {
    $bottomParts.removeClass('is-up').addClass('is-down');
    }

    if (scrollHeight - scrollPosition <= footHeight) {
    $bottomParts.css({
      position: "absolute",
      bottom: footHeight + "px",
    });
    } else {
    $bottomParts.css({
      position: "fixed",
      bottom: "0",
    });
    }
  }

  $window.on("scroll", handleScroll);


  handleScroll();
}


$(window).on('scroll load', bottomPartsAnime);