阻止腳本根據屏幕大小執行

Question

我目前正在嘗試阻止以下Javascript對小於769px的屏幕執行。 我是Java的新手，該腳本來自Codrops教程，內容涉及如何在滾動上設置標題動畫。 我做了一個小的修改，使我可以使用圖像。 原始腳本僅用於文本元素。 這是整體上稍有修改的腳本。

var cbpAnimatedHeader = (function() {

var docElem = document.documentElement,
    header = document.querySelector( '.header-outer' ),
    logo = document.querySelector( '.logo' )
    didScroll = false,
    changeHeaderOn = 300;




function init() {
    window.addEventListener( 'scroll', function( event ) {
        if( !didScroll ) {
            didScroll = true;
            setTimeout( scrollPage, 250 );
        }
    }, false );
}



    function scrollPage() {
        var sy = scrollY();
        if  ( sy >= changeHeaderOn ) {
            classie.add( header, 'header-shrink' );
            classie.add( logo, 'logo-shrink' );
        }
        else {
            classie.remove( header, 'header-shrink' );
            classie.remove( logo, 'logo-shrink' );
        }
        didScroll = false;
    }



function scrollY() {
    return window.pageYOffset || docElem.scrollTop;
}

init();

})();

我確實看到StackOverflow上的其他人也提出了類似的問題，但是到目前為止，提供給他的解決方案（ if ($(window).width() > 768) { ）不適用於我，我敢肯定應用不正確。

任何幫助將不勝感激 ：）

Answer 1

原因

$(window).width()

對您不起作用是因為它使用的是jQuery ，而您似乎沒有使用它。

而是使用：

window.innerWidth

因此，請執行以下操作：

if  ( sy >= changeHeaderOn && window.innerWidth > 768  ) {
    classie.add( header, 'header-shrink' );
    classie.add( logo, 'logo-shrink' );
}

Answer 2

試試這個js，

window.outerWidth,

您可以通過console.log（window）檢查所有與窗口相關的對象。