enable code working when a section scrolled into view

Question

I have a javascript that enables autorotating tabs on my website. my tabs are in the bottom of the page and by the moment when you reach this section almost the last tab is opened so the portfolio sort of starts not from the first item.

is there a way to enable this script only when the section with tabs scrolls into view?

the code snippet is here:

<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>

Answer 1

1. Detect how much the user has scrolled from top to determine when to run the function.
   With JavaScript:
   var scrollTop = window.pageYOffset || (document.documentElement || document.body.parentNode || document.body).scrollTop;
   With jQuery:
   var scrollTop = $(window).scrollTop();
   
   
2. Compare scrollTop with the position of the parent element of your Tabs.
   Here is a method to get that, if you need to calculate it:
   How can I get an object's absolute position on the page in Javascript?