Question

我打算使用全屏标题创建一个简单的布局，该标题向上滑动以显示带有图像网格的内容区域。但是当我点击触发器时它甚至无法向上滑动，我认为很可能是我的java脚本中出现错误，http://jsfiddle.net/LwLyht51/这里是我的js：

<script type = "text/javascript" >
(function() {
            var container = document.getElementById( 'container' ),
                trigger = container.querySelector( 'button.trigger' );

            function toggleContent() {
                if( classie.has( container, 'container--open' ) ) {
                    classie.remove( container, 'container--open' );
                    classie.remove( trigger, 'trigger--active' );
                    window.addEventListener( 'scroll', noscroll );
                }
                else {
                    classie.add( container, 'container--open' );
                    classie.add( trigger, 'trigger--active' );
                    window.removeEventListener( 'scroll', noscroll );
                }
            }

            function noscroll() {
                window.scrollTo( 0, 0 );
            }

            // reset scrolling position
            document.body.scrollTop = document.documentElement.scrollTop = 0;

            // disable scrolling
            window.addEventListener( 'scroll', noscroll );

            trigger.addEventListener( 'click', toggleContent );


        })();

</script>

更新classie.js代码：

/*!
* classie - class helper functions
* from bonzo https://github.com/ded/bonzo
*
* classie.has( elem, 'my-class' ) -> true/false
* classie.add( elem, 'my-new-class' )
* classie.remove( elem, 'my-unwanted-class' )
* classie.toggle( elem, 'my-class' )
*/

/*jshint browser: true, strict: true, undef: true */
/*global define: false */

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

// transport
if ( typeof define === 'function' && define.amd ) {
// AMD
define( classie );
} else {
// browser global
window.classie = classie;
}

})( window );

Answer 1

如果有人仍在寻找此错误（例如我）

只需在代码

中添加 id “容器”即可

var container = document。 getElementById （'container'）

滑动标题布局的JS错误

1 个答案: