-1

我一直试图让这个简单的代码工作几个小时，但需要帮助，因为它似乎不起作用。

我在 js 文件中使用 toggleClass 来切换标题上的类。我已经尝试了所有可能的方法，也在 jsfiddle 中尝试过，它有时可以工作，有时甚至不能使用相同的代码。所以肯定有问题。

这是我的html代码：

<!DOCTYPE HTML>
<html> 
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Menu</title>
        <link rel="stylesheet" type="text/css" href="menystyle.css">
    </head>
    <body>
        <header class="large">
            <nav>
                <ul>
                    <li><a href="#">Home</a>
                    </li>
                    <li><a href="#">Posts</a>
                    </li>
                    <li><a href="#">Contact</a>
                    </li>
                </ul>
            </nav>
        </header>
        <section class="stretch">
            <p>Make menu small</p>
            <p>End of the line.</p>
        </section>
        <script type="text/javascript" src="menu.js"></script>
    </body>
</html>

这是js文件中的脚本代码：

$(document).on("scroll", function () {
    $("header").toggleClass("small", $(document).scrollTop() > 100);
});

这是CSS：

body{ background-color: #ebebeb; }
ul{ float: right; }
li{ display: inline; float: left;} img.logo{float: left;}
/* Size and center the menu */ nav{ width: 960px; margin: 0 auto;} 

section.stretch{ float: left; height: 1500px; width: 100%; }
section.stretch p{ font-family: 'Amaranth', sans-serif; font-size: 30px; color: #969696; text-align: center; position: relative; margin-top: 250px; }
section.stretch p.bottom{ top: 100%; } 

header{ background: #C7C7C7; border-bottom: 1px solid #aaaaaa; float: left; width: 100%; position: fixed; z-index: 10; }
header a{ color: #969696; text-decoration: none; font-family: 'Amaranth', sans-serif; text-transform: uppercase; font-size: 1em; }
header a.active, header a:hover{ color: #3d3d3d; }
header li{ margin-right: 30px; }

/* Sizes for the bigger menu */
header.large{ height: 120px; }
header.large img{ width: 489px; height: 113px; }
header.large li{ margin-top: 45px; }

/* Sizes for the smaller menu */
header.small{ height: 50px; }
header.small img{ width: 287px; height: 69px; margin-top: -10px; }
header.small li{ margin-top: 17px; }
4

2 回答 2

2

在头部标签中，包括以下内容：

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

它应该在那之后工作。

于 2013-08-24T20:30:23.027 回答
0

在您的代码中包含jquery.min.js，然后您的代码就可以正常工作了。在工作状态下查看您的代码。

于 2013-08-24T20:15:28.470 回答