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

Question

I am currently trying to prevent the following Javascript from executing for screens that are smaller than 769px. I am a total Javascript newbie, this script is from a Codrops tutorial on how to animate a header on scroll. I have made a small modification that allows me to use images. The original script was for text elements only. Here is the slightly modified script in its entirety.

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();

})();

I did see someone else on StackOverflow ask a similar question, but the solution ( if ($(window).width() > 768) { ) that was given to him hasn't worked for me so far, I am sure that I am applying it incorrectly.

Any help would be greatly appreciated :)

Answer 1

The reason

$(window).width()

isn't working for you is because it uses jQuery , which you're not using it seems.

Instead use:

window.innerWidth

So, do this:

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

Answer 2

Try this js,

window.outerWidth,

You can check for all window associated objects via console.log(window).