不更新enquire.js断点的JS

Question

因此，我对JS/jQuery相当陌生。最近我发现了enquire.js，因为我希望加载不同的JS样式，以影响我在不同屏幕宽度下折叠的标题。我有一个滚动事件监听器，监听如果滚动超过250执行，否则恢复正常。

联合来文：

var标头、横幅、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);

        }
    });

因此，如您所见，例如，当内部宽度< 899时，我尝试监听调整大小和执行样式。调整大小的函数似乎根本不起作用。当我调整窗口的大小时，我的滚动函数仍然正常工作，没有发生任何事情。现在，我想要改变和添加到style.height，.top等在未来，因为这个项目还处于相当早期的阶段。

我还想过只编写CSS断点中的样式，但是滚动监听器会覆盖CSS吗？或者从我的滚动函数中去掉其他部分，这样CSS就会成为其他部分而不是JS？我真的只是在大声思考。

还在学习。另外，我是有意使用JS的，因为我正在构建我的投资组合，并且希望展示我的JS技能，因为我的其他项目都没有我可以展示的JS。谢谢您的任何guidance.SOLVED

Answer 1

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