Modal popup not working for responsive sticky header

Question

I'm stuck on trying to get a modal window to load from a sticky navbar. When I click on the button on .header_main, it loads the modal window. But when I click on the button on the header_main.sticky, nothing happens. Anyone know why? Is there some kind of conflicting JS? Thanks in advance!

Here's the code.

<!-- 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();

})();

And here's the 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; }  

Answer 1

I'm not certain, but I wonder if the problem is related to this Stack Overflow question. The solution in that answer may work if the .clone() is not copying the event listeners.

So the quick thing to try is to put true, true inside of .clone() like this .clone(true, true)