Javascript 模式弹出窗口不适用于响应粘性标题

我一直在尝试从粘性导航栏加载模态窗口。当我单击.header\u main上的按钮时，它将加载模式窗口。但是当我点击标题上的按钮时，什么也没有发生。有人知道为什么吗？是否存在某种相互冲突的JS？提前谢谢

这是密码

<!-- script to toggle header switch on scroll -->
$(function(){
    $("header").before($(".header_main").clone().addClass("sticky"));
    $(window).scroll(function(){

    if($(window).scrollTop() >= 100){
        $('.header_main.sticky').addClass('slideDown');
    } else {
        $('.header_main.sticky').removeClass('slideDown');
    }   
    });
});



/**
 * modalEffects.js v1.0.0
 * http://www.codrops.com
 *
 * Licensed under the MIT license.
 * http://www.opensource.org/licenses/mit-license.php
 * 
 * Copyright 2013, Codrops
 * http://www.codrops.com
 */
var ModalEffects = (function() {

    function init() {

        var overlay = document.querySelector( '.md-overlay' );

        [].slice.call( document.querySelectorAll( '.md-trigger' ) ).forEach( function( el, i ) {

            var modal = document.querySelector( '#' + el.getAttribute( 'data-modal' ) ),
                close = modal.querySelector( '.md-close' );

            function removeModal( hasPerspective ) {
                classie.remove( modal, 'md-show' );

                if( hasPerspective ) {
                    classie.remove( document.documentElement, 'md-perspective' );
                }
            }

            function removeModalHandler() {
                removeModal( classie.has( el, 'md-setperspective' ) ); 
            }

            el.addEventListener( 'click', function( ev ) {
                classie.add( modal, 'md-show' );
                overlay.removeEventListener( 'click', removeModalHandler );
                overlay.addEventListener( 'click', removeModalHandler );

                if( classie.has( el, 'md-setperspective' ) ) {
                    setTimeout( function() {
                        classie.add( document.documentElement, 'md-perspective' );
                    }, 25 );
                }
            });

            close.addEventListener( 'click', function( ev ) {
                ev.stopPropagation();
                removeModalHandler();
            });

        } );

    }

    init();

})();

---

我不确定，但我想知道问题是否与此有关。如果

.clone（）

没有复制事件侦听器，则该答案中的解决方案可能有效

---

因此，快速尝试的方法是将

true，true

放在

.clone（）

的内部，就像这样

.clone（true，true）

当您使它变粘时，您会更改元素的

位置

属性go

fixed

。可能会被上面的另一个“div”覆盖。我不确定，因为我不知道你的HTML代码。尝试在sticky类中添加一些

z-index

。感谢您的快速响应！我更新了CSS，所以也许你能有更好的想法。再次感谢！

.header_main { position:relative; z-index:98; transition:.15s top cubic-bezier(.3, .73, .3, .74); line-height:110px; }

/* Header Sticky */
.sticky { 
position:fixed; 
top:-90px; 
left:0; 
right:0; 
z-index:99; 
background:rgba(255, 255, 255, .95); 
border-bottom:1px solid #ddd; 
line-height:55px; 
box-shadow:0px 2px 4px 0px rgba(0,0,0,.05);
}
.sticky.slideDown { top:0; }

.md-perspective, .md-perspective body { height:100%; overflow: hidden; }
.md-perspective body  { background: #222; -webkit-perspective: 600px; -moz-perspective: 600px; perspective: 600px; }


.md-modal {
position: fixed;
top: 50%;
left: 50%;
width: 50%;
max-width: 630px;
min-width: 320px;
height: auto;
z-index: 2000;
visibility: hidden;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}

.md-show { visibility: visible; }

.md-overlay {
position: fixed;
width: 100%;
height: 100%;
visibility: hidden;
top: 0;
left: 0;
z-index: 1000;
opacity: 0;
background: rgba(143,27,15,0.8);
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}

.md-show ~ .md-overlay { opacity: 1; visibility: visible; }

/* Content styles */
.md-content { color:#fff; background:#e74c3c; position:relative; border-radius:3px; margin: 0 auto; }
.md-content h3 { margin:0; padding:0.4em; text-align:center; font-size:2.4em; font-weight:300; opacity:.8; background:rgba(0,0,0,0.1); border-radius:3px 3px 0 0; }
.md-content > div { padding: 15px 40px 30px; margin: 0; font-weight: 300; -size: 1.15em; }
.md-content > div p { margin: 0; padding: 10px 0; }
.md-content > div ul { margin: 0; padding: 0 0 30px 20px; }
.md-content > div ul li { padding: 5px 0; }
.md-content button { display: block; margin: 0 auto; font-size: 0.8em; }

/* Effect 12:  Just me */
.md-effect-12 .md-content { -webkit-transform:scale(.8); -moz-transform:scale(.8); -ms-transform:scale(.8); transform:scale(.8); opacity:0; -webkit-transition:all .3s; -moz-transition:all .3s; transition:all .3s; }
.md-show.md-effect-12 ~ .md-overlay { background: #e74c3c; } 
.md-effect-12 .md-content h3, .md-effect-12 .md-content { background: transparent; }
.md-show.md-effect-12 .md-content { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); transform: scale(1); opacity: 1; }