做一个动态点击nav(中a背景会变)有动画效果的锚链接,500毫秒滚动到元素上。
又写了一个滑动滚动条到相应的元素上nav上有背景效果。
但是 实际点击之后 在500毫秒毫米滑动的过程中 背景总是闪几下,把500设成0就好了,
请问鱼和熊掌怎样兼得?
$('.con-nav li a').click(function(e){
...
var pos = $(id).offset().top - 88;
$("html,body").stop().animate({scrollTop:pos},500);
});
$(window).scroll(function() {
....
var line = $('.con-nav li a .line');
if(newPos > slidePos && newPos < parameterPos){
line.eq(0).show(500).closest('li').siblings().find('.line').hide(500);
}else if (newPos > parameterPos - 5 && newPos < spPos2){
line.eq(1).show(500).closest('li').siblings().find('.line').hide(500);
}else if(newPos > spPos2){
line.eq(2).show(500).closest('li').siblings().find('.line').hide(500);
这个我遇到过,jquery对于滚动的动画有个小bug,当然也可能只是我自己的问题,也可能跟$("html,body")
有关。
动画刚开始时scrollTop会直接跳变为0,然后又跳变回来从当前位置再滚动到指定位置,所以会导致页面内跟滚动相关的元素会闪烁。
处理办法是在scroll里添加判定,当scrollTop为0时return false。
版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。