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

我目前正试图阻止对小于769px的屏幕执行以下Javascript。我是一个完全的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) {）至今还没有工作对我来说，我相信，我错误地应用它。

任何帮助，将不胜感激:)

来源

2013-12-17 Nillansan

'$（window）.width（）'是[jQuery]（http://jquery.com/）。 jQuery是一个JavaScript库。如果你不使用它，那么这段代码就不会做任何事情。 –

@PaulD.Waite，但抛出'ReferenceError：$未定义' – C5H8NNaO4

@ C5H8NNaO4：是的，非常真实：这就是它会做的。 –

原因

$(window).width()

工作不适合你，因为它使用jQuery，这你不使用它似乎。

而是使用：

window.innerWidth

所以，这样做：

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

来源

2013-12-17 11:20:22 Niall

是的，这是相当尴尬的，我为疏忽道歉，我会尝试你的建议谢谢:) – Nillansan

尼尔，请原谅我的新手，我已经尝试了你的建议，但我似乎无法使它的工作，头和标志的尺寸仍然在768px以下。你将如何将它应用于上面的脚本？ – Nillansan

@Nillansan所以你基本上不想运行'classie.add（header，'header-shrink'）; classie.add（logo，'logo-shrink'）;'如果宽度小于768是吧？ – Niall

试试这个JS，

window.outerWidth,

您可以检查通过的console.log所有窗口关联的对象（窗口）。

来源

2013-12-17 11:27:58 MackMon

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

回答

相关问题