Vue.jsで追従サイドメニューを作成

<div
    class="sticky-scroll" // ベースのスタイル
    :class="{ isScrollEnd: isScrollEnd }" // フローティングするボックスがウィンドウ下部を付け抜けないための判定
    ref="sideHeight" // 計算のための高さ取得
>
    ～　ここにコンテンツが入ります　～
</div>

<script>
export default {
    data() {
        return {
            isScrollEnd: false
        };
    },
    created() {
        this.handleScroll();
    },
    mounted() {
        // scroll位置の取得
        window.addEventListener('scroll', this.handleScroll);
    },
    beforeDestroy: function() {
        window.removeEventListener('scroll', this.handleScroll);
    },
    methods: {
        handleScroll() {
            if (!this.$refs.sideHeight) {
                return;
            }
            let sideHeight = this.$refs.sideHeight.clientHeight;
            let bodyHeight = document.body.clientHeight;
            let winHeight = window.innerHeight;
            if (winHeight < sideHeight) {
                if (
                bodyHeight - window.pageYOffset - winHeight <
                sideHeight - winHeight
                ) {
                this.isScrollEnd = true;
                } else {
                this.isScrollEnd = false;
                }
            } else {
                this.isScrollEnd = false;
            }
            return;
        }
    }
};
</script>

◆スタイル

.sticky-scroll {
    position: fixed;
    &.isScrollEnd {
        bottom: 0;
        position: absolute;
        top: auto !important;
    }
}