檢測滾動內的Bootstrap Modal＆動畫滾動的每個元素

我想寫一個代碼，當一個引導模式打開時，zoomIn動畫在滾動到每個元素時觸發。檢測滾動內的Bootstrap Modal＆動畫滾動的每個元素

的jsfiddle鏈接 - https://jsfiddle.net/nwxLq2zg/1/

下面是示例代碼 -

<!-- Button trigger modal --> 
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> 
    Launch demo modal 
</button> 

<!-- Modal --> 
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
    <div class="modal-dialog" role="document"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
     <h4 class="modal-title" id="myModalLabel">Modal title</h4> 
     </div> 
     <div class="modal-body"> 

     <p>...</p> 
     <p>...</p> 
     <p>...</p> 
     <p>...</p> 
     ... 

     </div> 
    </div> 
    </div> 
</div>

的jQuery

$('#myModal').on('show.bs.modal', function() { 

    $(".modal-body").unbind("scroll"); 

    $(".modal-body").scroll(function(){ 

     var mScroll = $(this).scrollTop(); 

     $('.modal-body p').each(function(){ 

      var eTop = $(this).offset().top; 
      console.log('Modal:'+mScroll+'| Element:'+eTop); 

      if(eTop > mScroll) { 
      $(this).addClass('animated zoomIn'); 
      } 

     }); 
    }); 
});

問題是addClass燒製以所有元素而不管滾動value.I的懷疑這是因爲我的代碼無法識別單個「< p>」標籤。如果任何人都能找到答案，那將非常有幫助。

實際的代碼可以在此的jsfiddle發現 - https://jsfiddle.net/nwxLq2zg/1/

來源

2016-11-04 Sree

我嘗試使用<= mScroll並添加-50 on top offset 檢查這個小提琴。

https://jsfiddle.net/nwxLq2zg/5/

$('#myModal').on('show.bs.modal', function() { 

    $(".modal-body").unbind("scroll"); 

    $(".modal-body").scroll(function(){ 
     var mScroll = $(this).scrollTop(); 

     $('.modal-body p').each(function(){ 
     var eTop = $(this).offset().top - 50; 

      if(eTop <= mScroll) { 
      $(this).addClass('animated zoomIn'); 
      } 

     }); 
    }); 
});

來源

2016-11-04 06:55:42

感謝您的建議，但它仍然沒有按預期工作。正如你所看到的，當我們達到大約70％的滾動時，所有底部元素都添加了類，並且動畫不再適用於最近的4-5項 – Sree

@Sree嘗試使用'scrollreveal.js'。檢查這個小提琴。 https://jsfiddle.net/nwxLq2zg/8/ –

您可以使用Wow.js，它有助於在滾動泄露身份的信息。所有你需要做的就是下載這個插件，在頁面中添加js文件並在頁面加載時初始化哇。

而在你的html中，你不需要在運行時添加類。

享受:)

來源

2016-11-04 07:00:09

由於某些原因，哇js在Bootstrap模式下無法使用。即使在滾動之前，它也會在所有元素上觸發動畫。 – Sree

你是否將哇類添加到身體？ –

檢測滾動內的Bootstrap Modal＆動畫滾動的每個元素

回答

相關問題