waypoints jQuery滾動效果外掛的簡單使用方法
阿新 • • 發佈：2019-02-18
</pre><pre name="code" class="html"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="./jquery.min.js"></script> <script type="text/javascript" src="./jquery.waypoints.min.js"></script> <style type="text/css"> .fixed{ position: fixed; top:0px; left:0px; } </style> </head> <body> <div style="height:100px;"></div> <table> <tr style="background: red;" id="aaa"> <th>1a</th> <th>1b</th> <th>1c</th> </tr> <tr> <td>a</td> <td>b</td> <td>c</td> </tr> <tr> <td>a</td> <td>b</td> <td>c</td> </tr> <tr> <td>a</td> <td>b</td> <td>c</td> </tr> <tr> <td>a</td> <td>b</td> <td>c</td> </tr> </table> <div style="height:10000px;"></div> aa </body> <script type="text/javascript"> $(function(){ $('#aaa').waypoint({ handler:function(direction){ //符合偏移條件 觸發 // direction down下移動 up上移動 if(direction == 'down'){ $(this.element).addClass('fixed'); }else{ $(this.element).removeClass('fixed'); } }, offset:0 //距離window視窗頂窗距離 可以為% 也可以支援回撥函式 bottom-in-view出現在最底部 right-in-view出現在最右邊 // offset: function() { // return Waypoint.viewportHeight() - this.element.clientHeight // } // horizontal 居中 // http://imakewebthings.com/waypoints/api/waypoint/#context-property 官網地址 }); }) </script> </html>