开发者社区> 问答> 正文

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);

展开
收起
小旋风柴进 2016-05-31 11:18:55 3776 0
1 条回答
写回答
取消 提交回答
  • 这个我遇到过,jquery对于滚动的动画有个小bug,当然也可能只是我自己的问题,也可能跟$("html,body")有关。

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

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

    2019-07-17 19:21:38
    赞同 展开评论 打赏
问答分类:
问答标签:
问答地址:
问答排行榜
最热
最新

相关课程

更多

相关电子书

更多
低代码开发师(初级)实战教程 立即下载
冬季实战营第三期:MySQL数据库进阶实战 立即下载
阿里巴巴DevOps 最佳实践手册 立即下载