Rails应用程序elem在classie.js中为null

Question

在我的Rails应用程序中,我的折叠navebar在滚动时不会改变它的样式,并且在inspect元素控制台中也会发生错误:

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

发生错误的Classie .js:

( 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
};

我改变了需要库的顺序,但它没有帮助.

//= 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

我还必须整合原子能机构的主题,并且也遇到了这个错误.由于某种原因,使用document.querySelector的cbpAnimatedHeader.js文件中的头变量始终为null.所以我将整个脚本转换为Jquery:

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

这可能不会直接回答你的问题,但它现在确实解决了这个问题.