Modal Popup funktioniert nicht für reagierende sticky header

Question

Ich bin auf dem Versuch, ein modales Fenster von einer sticky navbar zu laden. Wenn ich auf den Button auf .header_main klicke, wird das modale Fenster geladen. Aber wenn ich auf den Button auf der Header_main.sticky klicke, passiert nichts. Wer weiß warum? Gibt es eine Art von Konflikt JS? Danke im Voraus!

Hier ist der 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(); 

})(); 

Und hier ist der 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

Ich bin nicht sicher, aber ich frage mich, ob das Problem auf diese Stack Overflow question zusammenhängt. Die Lösung in dieser Antwort funktioniert möglicherweise, wenn die .clone() die Ereignislistener nicht kopiert.

So ist die schnelle, was zu versuchen ist true, true innerhalb von .clone() wie diese .clone(true, true)