화면 크기에 따라 스크립트 실행을 금지하십시오.

Question

현재 769px보다 작은 화면에서 다음 자바 스크립트가 실행되는 것을 방지하려고합니다. 나는 총 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

이유는 당신이 그것을 보인다 사용하지 않는 한, jQuery를 사용하기 때문에 당신이이기

$(window).width() 

가 작동하지 않습니다.

대신 사용 : 그래서

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를 통해 모든 윈도우 관련 개체를 확인할 수 있습니다 (창문).