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

Question

在我的 Rails 应用程序中，我的折叠导航栏在滚动时没有改变它的样式，并且在检查元素控制台中也发生了错误:

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

Answer 1

我还必须集成 Agency 主题，但也出现了该错误。由于某种原因，使用 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');
        }
    });
});

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