我正在创建一个导航栏，当用户向下滚动时它会消失，当用户向上滚动时它又会重新出现。我还想将导航栏的代码保存在自己的HTML文件中，以便于编辑。
.负载
导航条代码包含在index.html文件中，如下所示：
<div id="nav"></div>
加载它的JavaScript包含在index.html文件的<script>中：
$(function(){
$("#nav").load("navbar.html");
});
这很管用！
.addClass
我还使用下面的jQuery功能来允许我的导航栏在用户上下滚动时出现和消失：
(function ($) {
var previousScroll = 20;
$(window).scroll(function(e) {
var scroll = $(window).scrollTop();
if (scroll >= previousScroll) {
$('.navbar').addClass("navbar-hide");
}else if (scroll < previousScroll) {
$('.navbar').removeClass("navbar-hide");
}
previousScroll = scroll;
});
})(jQuery);
当我将导航条元素直接包含在index.html文件中时，此代码有效：
<nav class="navbar navbar-expand-sm sticky-top">
<div class="container-fluid">
<a class="navbar-brand" href="#">Text here</a>
[and so on]
</div>
</nav>
因此，当我不试图从另一个文件中包含导航栏时，可以添加和删除类，而不会出现错误。
问题
只有当我试图将这两个功能结合起来时，我才会遇到问题。
目前，当我尝试从其单独的文件加载导航栏并尝试应用jQuery代码时，导航栏显示在页面顶部，但是静态的。当用户滚动时，它不会跟随窗口，即使其源中的位置是sticky-top。
修复1？(无变化(
我想这可能是因为在导航栏被正确导入之前就已经应用了滚动代码。因此，我尝试将.addClass和.load函数组合成一个回调函数，首先加载加载的HTML代码，然后应用.addclass。不幸的是，这给我带来了与未组合函数相同的问题。我是JavaScript的新手，所以这个函数很可能已经被屠杀了：
$(function(){
$("#nav").load("/navbar.html", (function ($) { // the entire jQuery was inserted here:
var previousScroll = 20;
$(window).scroll(function(e) {
var scroll = $(window).scrollTop();
if (scroll >= previousScroll) {
$('.navbar').addClass("navbar-hide");
}else if (scroll < previousScroll) {
$('.navbar').removeClass("navbar-hide");
}
previousScroll = scroll;
});
})(jQuery));
});
修复2(成功，但…(
我还试着稍微改变了调用导航栏文件的方式。由于该类需要添加到<nav>元素中，所以我尝试更改代码，以便只有<nav>元素需要在index.html:中
JavaScript更新为：
$(function(){
$(".navbar").load("navbartest.html");
});
新的navbartest.html不再包含<nav>元素：
<div class="container-fluid">
<a class="navbar-brand" href="#">Text here</a>
[and so on]
</div>
CCD_ 14现在有：
<nav class="navbar navbar-expand-lg sticky-top"></nav>
取代了CCD_ 15。
成功了！因为<nav>元素不必从其他页面加载，所以jQuery函数能够毫无问题地应用新类。
然而，这意味着对<nav>元素的任何更改(如将navbar-expand-lg更改为navbar-expand-md(都需要我转到每个网页文件才能更新它，而这正是.load函数最初试图避免的。
因此，我希望能找到一个解决方案，让我可以将所有的导航栏代码保存在自己的文件中。也许我只是把回调函数搞砸了？
虽然我无法确定事件委派，但我确实找到了一个适用于我的修复程序！
我将head中的脚本更改为以下内容，将.addClass和.load脚本替换为外部引用：
<script src="templatesnavbarscript.js"></script>
我将.addClass和.load函数都移到了新文件navbarscript.js中。
这是位于外部的新脚本：
//.load
$(function(){
$("nav").load("../templates/navbar.html");
$("nav").addClass("navbar fixed-top navbar-expand-lg"); // new code!
});
//.addClass
(function ($) {
var previousScroll = 20;
$(window).scroll(function(e) {
var scroll = $(window).scrollTop();
if (scroll >= previousScroll) {
$('.navbar').addClass("navbar-hide");
}else if (scroll < previousScroll) {
$('.navbar').removeClass("navbar-hide");
}
previousScroll = scroll;
});
})(jQuery);
我添加的新代码行是一个额外的.addClass。现在，当我在这个文件中更改应用于<nav>元素的类时，它将应用于具有<nav>元素的每个文件。
完整HTML文件的一个示例是：
<!DOCTYPE html>
<html>
<head>
[...]
<script src="templatesnavbarscript.js"></script>
</head>
<body>
<nav></nav>
<div class="container">[...]</div>
<div id="foot"></div>
</body>
</html>