＆＃34;未捕获的TypeError：无法读取属性＆＃39; querySelector＆＃39; of null＆＃34;错误

Question

晚上好，

我正在尝试实现全屏导航，但是我一直收到以下错误：

＆＃34;未捕获的TypeError：无法读取属性＆＃39; querySelector＆＃39; of null＆＃34;

尽管删除了这个空主题模板中存在的所有不必要的JS，但我找不到此问题的原因。我还仔细检查了我已正确添加所有内容。

实时网址为here.我试图实施的JS来自this site.

(function() {
var container = document.querySelector( 'div.container' ),
    triggerBttn = document.getElementById( 'trigger-overlay' ),
    overlay = document.querySelector( 'div.overlay' ),
    closeBttn = overlay.querySelector( 'button.overlay-close' );
    transEndEventNames = {
        'WebkitTransition': 'webkitTransitionEnd',
        'MozTransition': 'transitionend',
        'OTransition': 'oTransitionEnd',
        'msTransition': 'MSTransitionEnd',
        'transition': 'transitionend'
    },
    transEndEventName = transEndEventNames[ Modernizr.prefixed( 'transition' ) ],
    support = { transitions : Modernizr.csstransitions };

function toggleOverlay() {
    if( classie.has( overlay, 'open' ) ) {
        classie.remove( overlay, 'open' );
        classie.remove( container, 'overlay-open' );
        classie.add( overlay, 'close' );
        var onEndTransitionFn = function( ev ) {
            if( support.transitions ) {
                if( ev.propertyName !== 'visibility' ) return;
                this.removeEventListener( transEndEventName, onEndTransitionFn );
            }
            classie.remove( overlay, 'close' );
        };
        if( support.transitions ) {
            overlay.addEventListener( transEndEventName, onEndTransitionFn );
        }
        else {
            onEndTransitionFn();
        }
    }
    else if( !classie.has( overlay, 'close' ) ) {
        classie.add( overlay, 'open' );
        classie.add( container, 'overlay-open' );
    }
}

triggerBttn.addEventListener( 'click', toggleOverlay );
closeBttn.addEventListener( 'click', toggleOverlay );
})();

感谢能够发现问题的任何人。