在Javascript事件監聽器中包含CSS媒體查詢

我有這個JavaScript代碼，使我的網站的頂部導航縮小。見下文：在Javascript事件監聽器中包含CSS媒體查詢

<script> 
     function init() { 
      window.addEventListener('scroll', function(e){ 
       var distanceY = window.pageYOffset || document.documentElement.scrollTop, 
        shrinkOn = 300, 
        header = document.querySelector("header"); 
       if (distanceY > shrinkOn) { 
        classie.add(header,"smaller"); 
       } else { 
        if (classie.has(header,"smaller")) { 
         classie.remove(header,"smaller"); 
        } 
       } 
      }); 
     } 
     window.onload = init(); 
    </script>

的代碼添加類「較小」到當窗口被向下滾動規定的距離，並降低它來滾動備份時的標頭部分。但是，我希望僅當屏幕大於768像素（即最小寬度：768像素）時才能添加和刪除該類。在較小的屏幕尺寸上，我不希望添加和刪除類工作。

我看到了一個使用代碼的例子，但我不知道如何將它添加到我上面的代碼中。

// media query event handler 
if (matchMedia) { 
    const mq = window.matchMedia("(min-width: 500px)"); 
    mq.addListener(WidthChange); 
    WidthChange(mq); 
} 

// media query change 
function WidthChange(mq) { 
    if (mq.matches) { 
    // window width is at least 500px 
    } else { 
    // window width is less than 500px 
    } 

}

任何關於如何結合這一點的幫助將不勝感激。

來源

2017-08-14 atsngr

您可以覆蓋風格，這是一個'MAX-width'媒體查詢中添加類的，因此不需要額外的JavaScript。或者，如果沒有重寫，只能在大型媒體查詢中應用這些類風格，即'min-width：768px' –

謝謝James。仔細一看，我意識到這可以通過媒體查詢覆蓋像你說的。 – atsngr

從你的描述，你想添加的條件內現有的代碼，所以：

// media query event handler 
    if (matchMedia) { 
     const mq = window.matchMedia("(min-width: 768px)"); 
     mq.addListener(WidthChange); 
     WidthChange(mq); 
    } 

    // media query change 
    function WidthChange(mq) { 
     if (mq.matches) { 
     [[ YOUR CODE ]] 
     } else { 
     [[ UNBIND SCROLL LISTENER ]] 
     } 

    }

來源

2017-08-14 08:11:54 Rockafella

謝謝。我可以通過使用像詹姆斯上面提到的媒體查詢覆蓋來解決這個問題，而不是增加額外的JavaScript代碼。 – atsngr

在Javascript事件監聽器中包含CSS媒體查詢

回答

相關問題