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

Prevent script from executing based on screen size

本文关键字：脚本 执行 屏幕      更新时间：2023-09-26

我目前正试图阻止以下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）.

检查所有与窗口相关的对象
相关文章：