JS 未更新 enquire.js 个断点

Question

所以我对 JS/jQuery 还很陌生。最近发现 enquire.js 因为我想加载不同的 JS 样式来影响我在不同屏幕宽度下的折叠 header。我有一个滚动事件侦听器，监听是否滚动超过 250 次执行，否则恢复正常。

JS 在这里：

var header、横幅、导航、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);

        }
    });

因此，正如您所见，我尝试监听调整大小并在内部宽度小于 899 时执行样式。调整大小功能似乎根本不起作用。当我调整 window 大小时，我的滚动功能仍然正常工作，没有任何反应。现在我想在将来更改并添加到 style.height .top 等，因为这个项目仍处于相当早的阶段。

我也想过在我的 CSS 断点中编写样式，但是滚动侦听器覆盖了 CSS?或者只是将 else 从我的滚动函数中取出，这样 CSS 将成为 else 部分而不是 JS？我真的只是在这里大声思考。

又在学习中。另外还要提一下，我在构建我的作品集时故意使用了 JS，并且想展示 JS 技能，因为我的其他项目中的 none 有很多我可以展示的 JS。在此先感谢您的指导。已解决

Answer 1

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

JS 未更新 enquire.js 个断点

JS not updating on enquire.js breakpoints

javascript

events

breakpoints

addeventlistener

enquire.js