JS在enquire.js斷點上不更新

所以我對JS/jQuery相當新穎。最近發現enquire.js，因爲我想加載不同的JS樣式，以不同的屏幕寬度來影響我的摺疊標題。我有一個滾動事件監聽器，偵聽是否滾動過250執行，否則回到正常。JS在enquire.js斷點上不更新

JS這裏：

VAR頭，旗幟，導航，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？或者只是把我的滾動功能，所以CSS將成爲其他部分，而不是JS？我真的只是在這裏大聲思考。

再次還在學習。另外，我只是提到我使用JS的目的，因爲我正在構建我的投資組合，並希望顯示JS技能，因爲我的其他項目都沒有很多JS可以展示。預先感謝任何指導。求解

來源

2015-11-24 Dawdre

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

來源

2015-11-24 02:34:59 Shashank

JS在enquire.js斷點上不更新

回答

相關問題