Rails Application elem is null in classie.js

Question

In my Rails application my collapse navebar is not changing it style while scrolling and also an error occur in inspect element console which is:

TypeError: elem is null
      elem.classList.add( c );

Classie .js in which error occurs:

( function( window ) {

'use strict';

// class helper functions from bonzo https://github.com/ded/bonzo

function classReg( className ) {
  return new RegExp("(^|\\s+)" + className + "(\\s+|$)");
}

// classList support for class management
// altho to be fair, the api sucks because it won't accept multiple classes at once
var hasClass, addClass, removeClass;

if ( 'classList' in document.documentElement ) {
  hasClass = function( elem, c ) {
    return elem.classList.contains( c );
  };
  addClass = function( elem, c ) {
    elem.classList.add( c );
  };
  removeClass = function( elem, c ) {
    elem.classList.remove( c );
  };
}
else {
  hasClass = function( elem, c ) {
    return classReg( c ).test( elem.className );
  };
  addClass = function( elem, c ) {
    if ( !hasClass( elem, c ) ) {
      elem.className = elem.className + ' ' + c;
    }
  };
  removeClass = function( elem, c ) {
    elem.className = elem.className.replace( classReg( c ), ' ' );
  };
}

function toggleClass( elem, c ) {
  var fn = hasClass( elem, c ) ? removeClass : addClass;
  fn( elem, c );
}

var classie = {
  // full names
  hasClass: hasClass,
  addClass: addClass,
  removeClass: removeClass,
  toggleClass: toggleClass,
  // short names
  has: hasClass,
  add: addClass,
  remove: removeClass,
  toggle: toggleClass
};

i change the sequence of require library but it not helping.

//= require jquery 
//= require jquery-1.11.0.js 
//= require classie.js 
//= require jquery_ujs
//= require bootstrap.js
//= require bootstrap.min.js
//= require agency.js
//= require contact_me.js
//= require cbpAnimatedHeader.js
//= require cbpAnimatedHeader.min.js
//= require jqBootstrapValidation.js

Answer 1

I had to also integrate the Agency theme and also am getting that error. For some reason the header variable on the cbpAnimatedHeader.js file using document.querySelector always results to null. So I converted the entire script to Jquery:

$(function(){
    $(window).scroll(function(){
        if ($(this).scrollTop() > 300){
            $('.navbar-default').addClass('navbar-shrink');
        }
        else{
            $('.navbar-default').removeClass('navbar-shrink');
        }
    });
});

This might not directly answer your question but it does solve the problem for now.