javascript - Webflow の特定のセクションでカスタム コードを有効にする

Question

重要かどうかはわかりませんが、Web 構築ツールとして Webflow を使用し、そこでカスタム コードを使用してタブの自動再生を有効にしています。

すべての要素にクラスがあり、ウェブサイトをゼロから作成するときと同じように Webflow でコードを使用するため、私の質問は一般的な Java スクリプトのトピックに関連している可能性があると確信しています。

次のコードを使用しているため、タブは 15 秒ごとに自動的に切り替わります。

<script>
    var Webflow = Webflow || [];
    Webflow.push(function() {
        var tabTimeout;
        clearTimeout(tabTimeout);
        tabLoop();

        // define loop - cycle through all tabs
        function tabLoop() {
            tabTimeout = setTimeout(function() {
                var $next = $('.tabs-menu').children('.w--current:first').next();

                if ($next.length) {
                    $next.removeAttr("href").click(); // click resets timeout, so no need for interval
                } else {
                    $('.tab-link:first').removeAttr("href").click();
                }
            }, 15000);
        }

        // reset timeout if a tab is clicked
        $('.tab-link').click(function() {
            clearTimeout(tabTimeout);
            tabLoop();
        });
    });
</script>

問題は、タブのあるセクションがヘッダー セクションではなく、ウェブサイトの下部にあるセクションであるため、ウェブサイトをセクションまでスクロールすると、自動再生スクリプトはずっと前に既に開始されており、セクションに到達するとすべてのタブのほぼ最後のタブが開かれます。したがって、ポートフォリオは最初の項目からではなく開始されます。

これらのタブがスクロールして表示されたときにのみ、上に投稿したコードが有効になることを確認する追加するコードスニペットはありますか?