前端 - jquery animate({scrollTop:$pos},500)与$(window).scroll方法冲突的问题？

问题描述

问 题

做一个动态点击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。

这篇关于前端 - jquery animate({scrollTop:$pos},500)与$(window).scroll方法冲突的问题？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！