我一直试图让这个简单的代码工作几个小时，但需要帮助，因为它似乎不起作用。
我在 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; }