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()
轮询,因为动画需要快速响应滚动。
有什么想法吗?
答案 0 :(得分:1)
当谈到滚动事件时,通过javascript修改css是唯一的方法。没有办法使用纯CSS来检测滚动位置,就像使用媒体查询和屏幕尺寸一样。
jquery css()
函数正在设置element.style.opacity
属性。您只是实际元素属性中的一个简短抽象层,因此它不是“昂贵的”#34;。
该调用中最昂贵的部分是$('.scroll-down-indicator')
选择器,因为它必须执行DOM遍历才能找到具有类名的元素。