Question

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

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

Answer 1

在head标签中，包括：

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

之后它应该可以工作。

Answer 2

在您的代码中包含jquery.min.js，然后您的代码就能正常运行。 See your code in working condition

无法让toggleClass工作

2 个答案: