javascript - 防止脚本根据屏幕尺寸执行

Question

我目前正试图阻止以下 Javascript 在小于 769 像素的屏幕上执行。我是一个完全的 Javascript 新手，这个脚本来自 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' );
}