Question

我目前正在尝试阻止以下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) {）到目前为止对我没有用，我确信我正在应用它。< / p>

非常感谢任何帮助：）

Answer 1

原因

$(window).width()

对您不起作用是因为它使用的是jQuery，您似乎没有使用它。

改为使用：

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（窗口）检查所有与窗口相关的对象。

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

2 个答案: