Javascript Rails应用程序元素在classie.js中为空

在我的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库的顺序，但它没有帮助

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

---

我还必须整合机构的主题，而且我也犯了这个错误。由于某些原因，使用document.querySelector的cbpAnimatedHeader.js文件上的header变量始终会导致null。因此，我将整个脚本转换为Jquery：

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

---

这可能无法直接回答您的问题，但它现在确实解决了问题。

在我使用缩小的JS时也遇到了同样的问题，因此仅使用普通JS（删除缩小的JS）就解决了问题

希望这有帮助

执行此操作后：

$（函数（）{
$（窗口）。滚动（函数（）{
如果（$（this）.scrollTop（）>300）{
$（'.navbar-default'）.addClass（'navbar-shrink'）；
}
否则{
$（'.navbar-default'）.removeClass（'navbar-shrink'）；
}
});
});如果您使用的主题是从wrapbootstrap.com或其他主题和内容提供商网站购买的，那么您必须特别注意主题如何加载和使用其js插件

大多数主题都使用大量javascript插件，在几乎所有情况下，您都会发现一个javascript文件加载并初始化所有这些插件

我建议你修改主js文件来初始化和驱动你的主题

在我从wrapbootstrap购买的主题-vitality中，vitality.js文件是主javascript文件，我注意到它没有使用$（document）.ready（）函数初始化所有其他javascript。据我所知，Rails需要一个document.ready函数，所以我所做的只是将（函数（$）{替换为$（document）.ready（函数（）{在文件的开头，瞧，一切都像一个符咒一样工作。希望这有帮助。
Open
“视图>布局>应用程序.html.erb”
现在移动此代码
true%>
在
之后和
之前
它保证在JavaScript运行之前在页面上加载DOM元素