检查所有与窗口相关的对象
我目前正试图阻止以下Javascript在小于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) {
)对我来说还不起作用,我确信我应用错误了。
如有任何帮助,我们将不胜感激:)
的原因
$(window).width()
对你不起作用是因为它使用了jQuery,而你似乎没有使用它。
改为使用:
window.innerWidth
所以,这样做:
if ( sy >= changeHeaderOn && window.innerWidth > 768 ) {
classie.add( header, 'header-shrink' );
classie.add( logo, 'logo-shrink' );
}
试试这个js,
window.outerWidth,
您可以通过console.log(window).