jquery：將動畫與滾動條位置綁定的更好方法

Question

var AddFootnoteScrollIndicator = function(){ 
    $('.mobileFootnote').on('scroll touchmove', function (event) { 
     var scrollTop = that.$mobileFootnote.scrollTop();     
     if (scrollTop <= 20){ 
      var opacity = 1 - (scrollTop/20); 
      $('.scroll-down-indicator').css({'opacity': opacity }); 
     } 
    }); 
}; 

隨着用戶向下滾動，指示器緩慢淡出，直到它消失。他們向上滾動，指示器慢慢重新出現。他們停在中間，指標是半透明的。

代碼工作正常，但通過.css()修改不透明度似乎很昂貴。有沒有更聰明的方式做這個通過CSS或...

我不想延遲.on()輪詢，因爲動畫需要快速響應滾動。

任何想法？

Answer 1

當涉及到滾動事件時，通過javascript修改CSS是唯一的方法。純CSS無法像使用媒體查詢和屏幕大小一樣檢測滾動位置。

jquery css()函數將element.style.opacity屬性設置在引擎蓋下。你只是實際元素屬性的一個簡短的抽象層，所以它不是「昂貴的」。

該調用中最昂貴的部分是$('.scroll-down-indicator')選擇器，因爲它必須執行DOM遍歷才能找到具有類名稱的元素。