Question

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

这是我的代码：

HTML

    <!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="styles/main.css" />
        <title>Rockets</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    </head>
    <body>
        <header>
            <img id="menu" src="images/menu1.png" />
            <div id="headerdiv">
                <h1>Rockets</h1>
                <img id="logo" src="images/logo1.png" />
            </div>
        </header>
        <nav>
            <ul>
                <li>
                    <a>Space Race</a>
                </li>
                <li>
                    <a>SpaceX</a>
                </li>
            </ul>
        </nav>
        <script>
            $( document ).ready(function() {
                var $menu = $('img#menu');
                var $headerdiv = $("div#headerdiv")
                var $nav = $('nav');


                $(window).on('scroll', function () {
                    if ($(window).scrollTop() > 40) {
                        $headerdiv.addClass("testheaderdiv");
                        $menu.delay(800).slideDown(800);
                        $nav.addClass('testnav');
                    }
                    if ($(window).scrollTop() < 40) {
                        $menu.slideUp(800, function () {
                            $headerdiv.removeClass('testheaderdiv');
                        });
                        $nav.removeClass('testnav');
                    }
                });
            });
        </script>
    </body>
</html>

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

Answer 1

我可以在代码中看到的主要问题是如何处理滚动，对于每个滚动事件，您都要向menu元素添加延迟。

所以试试

$(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;
        }
    });
});

为什么我的JQuery运行缓慢？

1 个答案: