Elementorで作る、出現・退場タイミングつき固定バー

今回は、「ある区間に入ったときだけ出現し、そこを過ぎると自然に消える」という、賢くてスマートな固定バーの作り方をご紹介します！

動作はこんな感じです：
・対象エリアに入るとバーが画面上に追従
・特定エリアを通過するとバーが自然に退場
・それ以外の場所では表示されない

JS（jQuery）とCSSだけで簡単に実装できますよ✨

作り方

コードスニペットを使用し、下記のコードをphpで挿入しましょう。コードを入れる以外は初期設定のままでいいです。（「サイト全体で表示」）

add_action('wp_footer', function() {
    ?>
    <script>
    jQuery(function($) {
        var $sticky = $('#my-sticky');
        var $stop = $('#stop-sticky');

        if ($sticky.length && $stop.length) {
            var stickyOffset = $sticky.offset().top;

            $(window).on('scroll', function() {
                var scrollTop = $(window).scrollTop();
                var stopOffset = $stop.offset().top;
                var stickyHeight = $sticky.outerHeight();

                if (scrollTop >= stickyOffset && (scrollTop + stickyHeight) < stopOffset) {
                    $sticky
                        .addClass('sticky-active')
                        .removeClass('sticky-hidden');
                } else if (scrollTop >= stickyOffset && (scrollTop + stickyHeight) >= stopOffset) {
                    $sticky
                        .addClass('sticky-hidden')
                        .removeClass('sticky-active');
                } else {
                    $sticky
                        .removeClass('sticky-active sticky-hidden');
                }
            });
        }
    });
    </script>
    <?php
});

カスタマイズ→追加CSSに、下記コードを挿入します。

#my-sticky {
  width: 100%;
  position: relative;
  z-index: 10;
  transition: opacity 0.4s ease, transform 0.4s ease;
}

/* 固定された状態 */
#my-sticky.sticky-active {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  opacity: 1;
  transform: translateY(0);
}

/* フェードアウト時の動き */
#my-sticky.sticky-hidden {
  opacity: 0;
  transform: translateY(-20px); /* 少し上に浮いて消える */
}

/* プレースホルダ（高さ確保） */
#sticky-placeholder {
  height: 0;
}

#my-sticky.sticky-active + #sticky-placeholder {
  height: 50px; /* sticky領域と同じ高さに調整 */
}

あとはElementorのセクションに、各IDを設定していきます。