jquery animate({scrollTop:$pos},500)与$(window).scroll方法冲突的问题?-问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文

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

小旋风柴进 2016-05-31 11:18:55 2941

做一个动态点击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);
JavaScript
分享到
取消 提交回答
全部回答(1)
  • 小旋风柴进
    2019-07-17 19:21:38

    这个我遇到过,jquery对于滚动的动画有个小bug,当然也可能只是我自己的问题,也可能跟$("html,body")有关。

    动画刚开始时scrollTop会直接跳变为0,然后又跳变回来从当前位置再滚动到指定位置,所以会导致页面内跟滚动相关的元素会闪烁。

    处理办法是在scroll里添加判定,当scrollTop为0时return false。

    0 0
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

推荐文章
相似问题
推荐课程