Drupal Theming js error - Cannot read property 'top' of undefined

Question

I create html theme, perfect work on clean html/css/js but in theming process for drupal7, faced with the problem:

Uncaught TypeError: Cannot read property 'top' of undefined

windowscroll: function(){

        var headerOffset = $header.offset().top;
        var headerWrapOffset = $headerWrap.offset().top;

        var headerDefinedOffset = $header.attr('data-sticky-offset');
        if( typeof headerDefinedOffset !== 'undefined' ) {
            if( headerDefinedOffset == 'full' ) {
                headerWrapOffset = $window.height();
                var headerOffsetNegative = $header.attr('data-sticky-offset-negative');
                if( typeof headerOffsetNegative !== 'undefined' ) { headerWrapOffset = headerWrapOffset - headerOffsetNegative - 1; }
            } else {
                headerWrapOffset = Number(headerDefinedOffset);
            }
        }

I checked Jquery all works, please tell me what kind of subtlety when porting theme .js for Drupal.

Answer 1

I believe that $header wasn't defined before. Try this code:

windowscroll: function(){
    console.log($header);

You should define this variable in this function block or pass it as parameter.