JS不更新enquire.js斷點

Question

因此，我對JS / jQuery相當陌生。 最近發現了enquire.js，因為我想加載不同的JS樣式以在不同的屏幕寬度下影響折疊的標題。 我有一個滾動事件監聽器，監聽是否滾動超過250個執行，否則恢復正常。

JS在這里：

var header，banner，nav，headertxt，pagetop，yPos;

    function yScroll() {
        header = document.getElementById("header");
        banner = document.getElementById("banner");
        nav = document.getElementById("nav");
        headertxt = document.getElementById("headertxt");
        pagetop = document.getElementById("pagetop");
        yPos = window.pageYOffset;
        if (yPos > 250) {
            header.style.height = "50px";
            //banner.style.top = "50px";
            //banner.style.height = "800px";
            nav.style.top = "45%";
            headertxt.style.top = "23%";
            pagetop.style.top = "140px";
        } else {
            header.style.height = "100px";
            //banner.style.top = "100px";
            //banner.style.height = "800px";
            nav.style.top = "75%";
            headertxt.style.top = "32%";
            pagetop.style.top = "107px";
        }
    }
    window.addEventListener("scroll", yScroll);

盡管發生了明顯的重大問題，但正在發生的事情卻達到了預期的效果。 我在頁面上滾動后才執行JS。 因此，如果我調整大小，將不會發生任何事情。 我希望樣式可以隨時更改，然后聽是否滾動然后使用上面的代碼。 我相信有一種更有效的方法可以做到這一點。 僅憑我的知識和經驗，我就嘗試了此方法。

enquire.register("screen and (min-width: 600px) and (max-width: 899px)", {
        match : function() {
            var header, banner, nav, headertxt, pagetop, yPos, iwidth;

                function Resize() {
                    header = document.getElementById("header");
                    banner = document.getElementById("banner");
                    nav = document.getElementById("nav");
                    headertxt = document.getElementById("headertxt");
                    pagetop = document.getElementById("pagetop");
                    iwidth = window.innerWidth;
                    if (iwidth < 899) {
                        header.style.height = "75px";
                        nav.style.top = "72%";
                        headertxt.style.top = "32%";
                        headertxt.style.fontSize ="21px";
                        pagetop.style.top = "107px";
                    }
                }
                window.addEventListener("onresize", Resize);

                function yScroll() {
                    header = document.getElementById("header");
                    banner = document.getElementById("banner");
                    nav = document.getElementById("nav");
                    headertxt = document.getElementById("headertxt");
                    pagetop = document.getElementById("pagetop");
                    yPos = window.pageYOffset;
                    if (yPos > 250) {
                        header.style.height = "35px";
                        //banner.style.top = "50px";
                        //banner.style.height = "800px";
                        nav.style.top = "45%";
                        headertxt.style.top = "20%";
                        headertxt.style.fontSize = "17px";
                        pagetop.style.top = "140px";
                    } else {
                        header.style.height = "75px";
                        //banner.style.top = "100px";
                        //banner.style.height = "800px";
                        nav.style.top = "72%";
                        headertxt.style.top = "32%";
                        headertxt.style.fontSize = "21px";
                        pagetop.style.top = "107px";
                    }
                }
                window.addEventListener("scroll", yScroll);

        }
    });


    enquire.register("screen and (min-width: 900px)", {
        match : function() {
            var header, banner, nav, headertxt, pagetop, yPos, iwidth;

                function Resize() {
                    header = document.getElementById("header");
                    banner = document.getElementById("banner");
                    nav = document.getElementById("nav");
                    headertxt = document.getElementById("headertxt");
                    pagetop = document.getElementById("pagetop");
                    iwidth = window.innerWidth;
                    if (iwidth > 899) {
                        header.style.height = "100px";
                        nav.style.top = "75%";
                        headertxt.style.top = "32%";
                        headertxt.style.fontSize ="21px";
                        pagetop.style.top = "107px";
                    }
                }
                window.addEventListener("onresize", Resize);

                function yScroll() {
                    header = document.getElementById("header");
                    banner = document.getElementById("banner");
                    nav = document.getElementById("nav");
                    headertxt = document.getElementById("headertxt");
                    pagetop = document.getElementById("pagetop");
                    yPos = window.pageYOffset;
                    if (yPos > 250) {
                        header.style.height = "50px";
                        //banner.style.top = "50px";
                        //banner.style.height = "800px";
                        nav.style.top = "45%";
                        headertxt.style.top = "23%";
                        headertxt.style.fontSize ="21px";
                        pagetop.style.top = "140px";
                    } else {
                        header.style.height = "100px";
                        //banner.style.top = "100px";
                        //banner.style.height = "800px";
                        nav.style.top = "75%";
                        headertxt.style.top = "32%";
                        headertxt.style.fontSize ="21px";
                        pagetop.style.top = "107px";
                    }

                }
                window.addEventListener("scroll", yScroll);

        }
    });

如您所見，例如，當innerwidth小於899時，我嘗試偵聽調整大小並執行樣式。 調整大小功能似乎根本不起作用。 調整窗口大小時，我的滾動功能仍然可以正常工作。 現在，我將要在將來更改並添加到style.height .top等中，因為該項目仍處於早期階段。

我還想到了只是在CSS斷點中編碼樣式，但是滾動偵聽器會覆蓋CSS？ 或者只是從我的滾動功能中刪除else，以便CSS將成為else部分而不是JS？ 我真的只是在這里大聲思考。

再次還在學習。 還要提一下，我在構建自己的產品組合時就故意使用了JS，並希望展示JS技能，因為我的其他項目都沒有我可以展示的JS。 在此先感謝您的指導。 解決了

Answer 1

事件字符串是'resize' ，而不是'onresize' 。 ：P