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遍历才能找到具有类名的元素。