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()
轮询,因为动画需要快速响应滚动。
有什么想法吗?
最佳答案
当涉及到滚动事件时,通过 javascript 修改 css 是唯一的方法。没有一种方法可以像使用媒体查询和屏幕尺寸那样使用纯 CSS 来检测滚动位置。
jquery css()
函数在后台设置 element.style.opacity
属性。您只是实际元素属性的一个简短抽象层,因此它并不“昂贵”。
该调用中成本最高的部分是 $('.scroll-down-indicator')
选择器,因为它必须执行 DOM 遍历以查找具有类名的元素。
关于javascript - jquery:将动画绑定(bind)到滚动条位置的更好方法,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37234458/