JSFiddle - React, Tailwind, and code Playground

by piyo8810

HTML

<div class="container-fluid mt-4">
    <div class="row">
        <div class="col-11 card" style="height:1000px">
            <div class="card-body">
                <div class="row text-gray">
                    <div class="col-4" style="font-weight: bold;text-align: center" id="text-one">
                        なにもないゾーン
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row" id="fluit-header">
        <div class="col-11 card" style="height:1000px">
            <div class="card-body">
                <div class="row text-gray">
                    <div class="col-4" style="font-weight: bold;text-align: center" id="text-one">
                        果物のゾーン
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-11 card fluit-fixed-button" id="fluit-fixed-button">
            果物を追加します(固定)
        </div>
    </div>

    <div class="row" id="fluit-footer">
        <div class="col-11 card" style="height:100px">
            <div class="card-body">
                <div class="row text-gray">
                    <div class="col-4" style="font-weight: bold;text-align: center" id="text-one">
                        果物ここまで
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row" id="sweats-header">
        <div class="col-11 card" style="height:1500px">
            <div class="card-body">
                <div class="row text-gray">
                    <div class="col-4" style="font-weight: bold;text-align: center" id="text-one">
                        お菓子のゾーン
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row" id="sweats-footer">
        <div class="col-11 card" style="height:100px">
            <div class="card-body">
                <div class="row text-gray">
                    <div class="col-4"...

CSS

.add-fluit-button {
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 10rem;
    height: 10rem;
    right: 0;
    bottom: 0;
    font-size: 1rem;
    font-weight: bold;
    color: black;
    background: lightpink;
    cursor: pointer;
    opacity: 0.1;
    transition: 2s;
}

.add-sweats-button {
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 10rem;
    height: 10rem;
    right: 0;
    bottom: 0;
    font-size: 1rem;
    font-weight: bold;
    color: black;
    background: lightgreen;
    cursor: pointer;
    opacity: 0.1;
    transition: 2s;
}

.add-juice-button {
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 5rem;
    height: 10rem;
    right: 0;
    bottom: 0;
    font-size: 1rem;
    font-weight: bold;
    color: black;
    background: lightblue;
    cursor: pointer;
}

.fluit-fixed-button {
    align-items: center;
    justify-content: center;
    height: 5rem;
    font-size: 3rem;
    font-weight: bold;
    color: gray;
    background: lightpink;
    cursor: pointer;
}

.sweats-fixed-button {
    align-items: center;
    justify-content: center;
    height: 5rem;
    font-size: 3rem;
    font-weight: bold;
    color: gray;
    background: lightgreen;
    cursor: pointer;
}

.button-opacity-1 {
    opacity: 1;
    transition: 2s;
}

JavaScript

function getScrollBottom() {
            var body = window.document.body;
            var html = window.document.documentElement;
            var scrollTop = body.scrollTop || html.scrollTop;
            return html.clientHeight + scrollTop;
        }

        $(window).on("load", function () {
            var fluitButton = $('.add-fluit-button');
            var sweatsButton = $('.add-sweats-button');
            var fluitFixedButton = $("#fluit-fixed-button");
            var sweatsFixedButton = $("#sweats-fixed-button");
            var fluitTimeout;
            var sweatsTimeout;

            //ボタンを非表示にする
            fluitButton.hide();
            sweatsButton.hide();

            var fluitHeader = $("#fluit-header").offset().top;
            var fluitFooter = $("#fluit-footer").offset().top;

            var sweatsHeader = $("#sweats-header").offset().top;
            var sweatsFooter = $("#sweats-footer").offset().top;

            // 果物ボタン
            $(window).scroll(function () {
                if ((getScrollBottom() > fluitHeader) && (getScrollBottom() < fluitFooter)) {
                    //フェードインで表示
                    fluitButton.fadeIn();

                    // スクロール中は透明にしない
                    fluitButton.addClass("button-opacity-1");
                } else {
                    //フェードアウトで非表示
                    fluitButton.fadeOut();
                }

                clearTimeout(fluitTimeout);

                fluitTimeout = setTimeout(function () {
                    fluitButton.removeClass("button-opacity-1");
                }, 3000);
            });

            // お菓子ボタン
            $(window).scroll(function () {
                if ((getScrollBottom() > sweatsHeader) && (getScrollBottom() < sweatsFooter)) {
                    //フェードインで表示
                    sweatsButton.fadeIn();

                    // スクロール中は透明にしない
                    sweatsButton.addClass("button-opacity-1");

                } else {
                   ...