一小段简单的jQuery代码,试图实现右边栏淡入淡出的效果。结果在Chrome for Mac下有明显的顿卡迹象(Mac系统为El Captain),其他浏览器下均正常。
如果是Mac用户可直接访问网站感受上面描述的效果:网站传送门
提供小视频参考访问网站效果:
Chrome for Mac:视频传送门
其他浏览器:视频传送门
jQuery代码:
<script>
var scroll = $('.toggle-span');
var wrapper1 = $('#mainpage');
var wrapper2 = $('.wrapper2');
var maincontent = $('#main-content');
var side = $('.col-md-4');
var collpas = $('.toggle-span2');
scroll.click(function(){
// wrapper1.removeClass('wrapper').addClass('wrapper2');
side.css('display','block');
$(this).css('display','none');
collpas.css('display','block');
maincontent.removeClass('inner').addClass('col-md-8');
})
collpas.click(function(){
maincontent.removeClass('col-md-8').addClass('inner');
side.css('display','none');
scroll.css('display','block');
$(this).css('display','none');
})
$(window).scroll(function(){
scroll.css('top',Math.max(60,150-$(this).scrollTop()));
})
</script>
想知道是什么原因导致这一jQuery效果会在Chrome里卡的。
我这没问题啊。。。Chrome版本 46.0.2490.86 (64-bit)
$(window).scroll(function(){
scroll.css('top',Math.max(60,150-$(this).scrollTop()));
})
感觉如果有问题的话,应该是这段,请使用节流器来优化下性能,看看还会不会。
JavaScript函数节流与函数去抖
或者是使用underscore工具,里面有带一个节流方法。