阻止脚本根据屏幕大小执行

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）检查所有与窗口相关的对象。