jquery.appear.min.js是一款輕量級的jQuery插件,用于檢測元素是否出現在瀏覽器的可視區域內。
$(element).appear(function(){ // do something when element appears in viewport });
當瀏覽器滾動到某個元素時,插件會觸發函數回調。
$(element).appear(function(){ $(this).addClass('animated fadeIn'); });
插件同時支持多個元素的檢測。
$('.myClass').appear(function(){ $(this).addClass('animated fadeIn'); });
需要注意的是,此插件的檢測方式是通過頁面滾動來實現的,因此當通過其他方式更改元素位置時,可能會出現誤判。
$(window).scroll(function(){ $('.myElement').css('position', 'fixed'); });
如果需要對插件進行自定義,可以通過傳入一些參數來實現。
$(element).appear({ data: {}, // 傳遞至回調函數的選項參數 one: true, // 僅觸發一次回調函數 accX: 0, // X軸方向的元素頂部偏移 accY: 0, // Y軸方向的元素頂部偏移 threshold: 0, // 出現在可視區域的閾值(0-1) visible: function(){}, // 出現在可視區域時的回調函數 disappear: function(){} // 離開可視區域時的回調函數 });
使用jquery.appear.min.js可以為網站增加動態效果,提升用戶體驗。