javascript – 为什么我的JQuery运行缓慢?

前端之家收集整理的这篇文章主要介绍了javascript – 为什么我的JQuery运行缓慢?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

我是JQuery的新手,我刚刚开始研究它.我四处寻找可能导致这段代码不起作用的原因.向下滚动时,我希望h1移到侧面,然后出现一个菜单按钮.这样可行,但当我再次向上滚动时,需要很长时间才能自行反转.我试图对任何可能导致延迟或类似问题的事情进行罚款,但据我所知,没有任何问题.
链接到网站:http://www.dragonmath.net/rockets

这是我的代码

HTML

    logo" src="images/logo1.png" />
            

CSS

    * {
    margin: 0px;
    padding: 0px;
    color: #00AAFF;
    font-family: Arial;
}

body {
    height: 800px;
}

header {
    position: fixed;
    top: 0px;
    left: 0px;
    height: 100px;
    width: 100%;
    background-color: #333;
    z-index: 1;
}

div#headerdiv {
    display: inline;
    transition: all 1s;
}

h1 {
    display: inline;
    margin-left: 40px;
    font-size: 40px;
}

header > img#menu {
    position: fixed;
    top: 20px;
    left: 40px;
    width: 40px;
    height: 40px;
    display: none;
}

header > div > img#logo {
    display: inline;
    width: 60px;
    height: 60px;
    position: relative;
    top: 18px;
    left: 20px;
    transition: height 1s,width 1s;
}

nav {
    position: relative;
    top: 100px;
    height: 40px;
    width: 100%;
    background-color: #333;
}

nav > ul {
    list-style: none;
}

nav > ul > li {
    display: inline-block;
    height: 40px;
    width: 200px;
    text-align: center;
    border-right: 1px solid #00AAFF;
}

nav > ul > li > a {
    position: relative;
    top: 6px;
}

.testheaderdiv {
    margin-left: 80px;
    transition: all 1s;
}

.testnav {
    display: none;
}
最佳答案
我可以在代码中看到的主要问题是如何处理滚动,对于每个滚动事件,您都会向菜单元素添加延迟.

所以试试吧

$(document).ready(function () {
    var $menu = $('img#menu');
    var $headerdiv = $("div#headerdiv")
    var $nav = $('nav');


    var flag;
    $(window).on('scroll',function () {
        if (flag !== 1 && $(window).scrollTop() > 40) {
            $headerdiv.addClass("testheaderdiv");
            $menu.stop(true,true).delay(800).slideDown(800);
            $nav.addClass('testnav');
            flag = 1;
        }
        if (flag !== 2 && $(window).scrollTop() < 40) {
            $menu.stop(true,true).slideUp(800,function () {
                $headerdiv.removeClass('testheaderdiv');
            });
            $nav.removeClass('testnav');
            flag = 2;
        }
    });
});
原文链接:https://www.f2er.com/html/426133.html

猜你在找的HTML相关文章