模態彈出不響應響應式粘性標題

Question

我一直試圖讓一個模態窗口從粘滯的導航欄加載。當我點擊.header_main上的按鈕時，它會加載模態窗口。但是當我點擊header_main.sticky上的按鈕時，沒有任何反應。有人知道爲什麼是否有某種衝突的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(); 

})(); 

而這裏的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

我不能肯定，但我不知道這個問題是關係到這個Stack Overflow question。如果.clone()未複製事件偵聽器，則該答案中的解決方案可能會有效。

那麼快的事情是嘗試把true, true的.clone()內這樣.clone(true, true)