Fatal编程技术网
  • javascript/
  • Javascript jQuery animate（）在scrollTop中使用时在左边距上工作不正常

Javascript jQuery animate（）在scrollTop中使用时在左边距上工作不正常

javascript jquery html css

Javascript jQuery animate（）在scrollTop中使用时在左边距上工作不正常,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我有一个span类，当用户向下滚动到160px时，它应该使用animate（）来显示； 它第一次和第二次工作正常，之后animate（）显示得非常慢 我的代码是 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>tokka</title> &

我有一个span类，当用户向下滚动到160px时，它应该使用animate（）来显示； 它第一次和第二次工作正常，之后animate（）显示得非常慢

我的代码是

<!DOCTYPE html>
    <html>
        <head lang="en">
            <meta charset="UTF-8">
            <title>tokka</title>
            <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
            <style>
                /*-------------- TopBar----------*/
                #topbar{
                    padding: 0px;
                    background-color: #2483A0;
                }
                #topbar .topextra{
                    background-color: #000000;
                    color: #ffffff;
                }

                #topbar .collection .logo_box{
                    min-width: 200px;
                    padding: 1px;
                }
                #topbar .collection .logo_box a{
                    display: inline-block;
                    margin-right: 5px;
                    color: #ffffff;
                }

            </style>
            <script language="javascript" src="../lib/jquery/jquery.js"></script>
            <script language="JavaScript" src="../lib/bootstrap/bootstrap.js"></script>

            <script language="JavaScript" src="../lib/angular/angular.js"></script>
            <script language="javascript">
                $(document).ready(function(){
                    $(function () {
                        $(window).scroll(function () {
                            if ($(this).scrollTop() > 160) {
                                $("#category_navbar").slideUp(function(){
                                    $(".topextra").slideUp();
                                    $("#showmenow").animate({'margin-left':"0px"});
                                });
                            } else {
                                $(".topextra").slideDown(function(){
                                    $("#category_navbar").fadeIn();
                                    $("#showmenow").animate({'margin-left':"-50px"});
                                });
                            }
                        });

                        // scroll body to 0px on click
                        /*$('#back-top a').click(function () {
                            $('body,html').animate({
                                scrollTop: 0
                            }, 600);
                            return false;
                        });*/
                    });
                });
            </script>
        </head>
        <body>
            <br><br><br><br>
            <div id="topbar" class="navbar navbar-default navbar-fixed-top topnavbar no-radius" role="navigation">
                <div class="container-fluid">
                    <div class="row topextra">
                        something
                    </div>
                    <div class="row collection">
                        <div class="col-md-2">
                            <div class="navbar-header">
                                <div class="logo_box pull-right">
                                    <span id="showmenow" style="margin-left:-50px;"><a href="#"><h4>title</h4></a></span>
                                    <a href="#"><img ng-src="..." style="height: 30px; width: 90px"/></a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="navbar navbar-inverse" id="category_navbar" style="width:100%;position: fixed;">
                this is me
            </div>

            <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
            <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
            <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
        </body>
    </html>


托克卡
/*--------------顶栏----------*/
#顶栏{
填充：0px；
背景色：#2483A0；
}
#顶杆，顶杆{
背景色：#000000；
颜色：#ffffff；
}
#顶栏。收藏。标志盒{
最小宽度：200px；
填充：1px；
}
#顶栏。收藏。标志盒a{
显示：内联块；
右边距：5px；
颜色：#ffffff；
}
$（文档）.ready（函数（）{
$（函数（）{
$（窗口）。滚动（函数（）{
如果（$（this）.scrollTop（）>160）{
$（“类别导航栏”）.slideUp（函数（）{
$（“.topextra”）.slideUp（）；
$（“#showmenow”）.animate（{'margin-left'：“0px}）；
});
}否则{
$（“.topextra”）.slideDown（函数（）{
$（“类别导航栏”）.fadeIn（）；
$（“#showmenow”）.animate（{'margin-left'：“-50px}）；
});
}
});
//单击可将正文滚动到0px
/*$（“#返回顶部a”）。单击（函数（）{
$（'body，html'）。设置动画({
滚动顶部：0
}, 600);
返回false；
});*/
});
});





某物
这是我
似乎有两个问题

  • 只有当
    slideUp（）
    或
    slideDown
    动画完成后，才会调用动画代码。因此，最好将其置于oncomplete函数之外，这样无论上一个动画是否已完成，都会调用它

  • 每次调用
    $（“#showmenow”）
    上的动画时，都会调用
    $（窗口）。scroll（）
    ，即使它实际上没有进行任何更改。动画需要一定的时间，即使它什么也不做，因此等待前一个动画完成会导致延迟。我认为在检查是否需要动画时加入if语句可以解决这个问题

    • 因此，您的JS代码将变成：

    $(document).ready(function(){
    $(window).scroll(function () {
        if ($(this).scrollTop() > 160) {
            if($("#showmenow").css('marginLeft')=="-50px"){
                //only run when animation is required
                $("#showmenow").animate({'margin-left':"0px"});
            }
            $("#category_navbar").slideUp(function(){
                //only runs after slideUp() has completed
                $(".topextra").slideUp();
            });
        } else {
            if($("#showmenow").css('marginLeft')=="0px"){
                //only run when animation is required
                $("#showmenow").animate({'margin-left':"-50px"});
            }
            $(".topextra").slideDown(function(){
                //only runs after slideDown() has completed
                $("#category_navbar").fadeIn();
            });
        }
    });
});

    $(document).ready(function(){
    $(window).scroll(function () {
        if ($(this).scrollTop() > 160) {
            //stop previous animations and clear queue
            $("#showmenow").stop(true).animate({'margin-left':"0px"});
            $("#category_navbar").slideUp(function(){
                //only runs after slideUp() has completed
                $(".topextra").slideUp();
            });
        } else {
            //stop previous animations and clear queue
            $("#showmenow").stop(true).animate({'margin-left':"-50px"});
            $(".topextra").slideDown(function(){
                //only runs after slideDown() has completed
                $("#category_navbar").fadeIn();
            });
        }
    });
});
    这是一把正在工作的JS小提琴：

    另一种方法是，您可以使用
    stop（）
    （）停止以前的动画并清除队列，而不是使用if语句检查动画是否应该运行。在这种情况下，您的代码将变成：

    $(document).ready(function(){
    $(window).scroll(function () {
        if ($(this).scrollTop() > 160) {
            if($("#showmenow").css('marginLeft')=="-50px"){
                //only run when animation is required
                $("#showmenow").animate({'margin-left':"0px"});
            }
            $("#category_navbar").slideUp(function(){
                //only runs after slideUp() has completed
                $(".topextra").slideUp();
            });
        } else {
            if($("#showmenow").css('marginLeft')=="0px"){
                //only run when animation is required
                $("#showmenow").animate({'margin-left':"-50px"});
            }
            $(".topextra").slideDown(function(){
                //only runs after slideDown() has completed
                $("#category_navbar").fadeIn();
            });
        }
    });
});

    $(document).ready(function(){
    $(window).scroll(function () {
        if ($(this).scrollTop() > 160) {
            //stop previous animations and clear queue
            $("#showmenow").stop(true).animate({'margin-left':"0px"});
            $("#category_navbar").slideUp(function(){
                //only runs after slideUp() has completed
                $(".topextra").slideUp();
            });
        } else {
            //stop previous animations and clear queue
            $("#showmenow").stop(true).animate({'margin-left':"-50px"});
            $(".topextra").slideDown(function(){
                //only runs after slideDown() has completed
                $("#category_navbar").fadeIn();
            });
        }
    });
});
    这是JS提琴：

    在这个快速提琴中对我来说似乎很好。小提琴对你有用吗？它有用，但在我到达顶端后，标题来得很慢。向下滚动三到四次，您将看到。我希望标题应该在我到达顶部时立即开始动画制作。啊，我现在看到了。似乎发生在我快速滚动时。我一会儿会仔细看看。我的回答有助于解决你的问题吗？如果我有任何误解，请告诉我。如果我的回答确实解决了你的问题。你介意把它标为接受答案吗？谢谢。使用stop（）对我来说非常有效。谢谢