Monitoring navigation function: logic judgment Write a simple monitoring navigation function.



I feel logic judgment still needs to be optimized.
I don't have a clear idea right now about code logic such as reducing if statements
How can I optimize the performance of this code?




&lt;!-- =panel: start --&gt;
&lt;div class="panel" role="region"&gt;&lt;/div&gt;
&lt;!-- =panel: end --&gt;

&lt;script&gt;
    var em = document.querySelectorAll(".panel");
    var viewHeight = window.innerHeight;
    var clientHeight = document.body.clientHeight;
    var timeOut = null;

    em.forEach(function (em, index) {
        watchNav(em);
    });

    function watchNav(em) {
        var emHeight = em.offsetHeight;
        var emTop = em.offsetTop;
        clearTimeout(timeOut);

        window.addEventListener("scroll", function (e) {
            var scrollY = window.scrollY;

            timeOut = setTimeout(function () {
                // Logical judgment: how to optimize, want better implementation.
                // Such as reducing the if statement
                // ++++++++++++++++
                if (scrollY &gt; emTop || scrollY + viewHeight / 2 &gt; emTop || scrollY + viewHeight &gt; emTop + emHeight) {
                    console.log("...activing...");
                    em.classList.add("view-focus");
                }
                else {
                    console.log("none");
                    em.classList.remove("view-focus");
                }

                if (scrollY &gt; emTop + emHeight / 2) {
                    console.log("none");
                    em.classList.remove("view-focus");
                }
                // ++++++++++++++++
            }, 40);
        }, false);
    }
&lt;/script&gt;
A few comments:


Array.forEach takes a callback, this can be done directly as so:  ems.forEach(watchNav)
Also, you have scope conflicts: the global variable em, and the function parameter em
A third comment: You should n ot edit your question based on feedback in comments.
Your if statement is fine.



&lt;script&gt;
    var ems = document.querySelectorAll(".panel"),
        viewHeight = window.innerHeight,
        clientHeight = document.body.clientHeight,
        timeOut = null;

    ems.forEach(watchNav);

    function watchNav(em) {
        var emHeight = em.offsetHeight;
        var emTop = em.offsetTop;
        clearTimeout(timeOut);

        window.addEventListener("scroll", function (e) {
            var scrollY = window.scrollY;

            timeOut = setTimeout(function () {
                // Logical judgment: how to optimize, want better implementation.
                // Such as reducing the if statement
                // ++++++++++++++++
                if (scrollY &gt; emTop || scrollY + viewHeight / 2 &gt; emTop || scrollY + viewHeight &gt; emTop + emHeight) {
                    console.log("...activing...");
                    em.classList.add("view-focus");
                } else {
                    console.log("none");
                    em.classList.remove("view-focus");
                }

                if (scrollY &gt; emTop + emHeight / 2) {
                    console.log("none");
                    em.classList.remove("view-focus");
                }
                // ++++++++++++++++
            }, 40);
        }, false);
    }
&lt;/script&gt;
```