关于javascript：滚动添加/删除类(WordPress)

Add/remove classes on scroll (WordPress)

我正在尝试使小部件在用户向下滚动页面50px时添加一个类并删除一个类，并在用户再次向上滚动时反转该过程。

网站：链接到这里

平台：WordPress

主题：Customizr-child

我尝试影响的窗口小部件已将header-widget类应用于该窗口小部件。这个论坛主题促使我创建了：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

$(function() {
//caches a jQuery object containing the header element
var header = $(".header-widget");
$(window).scroll(function() {
var scroll = $(window).scrollTop();

if (scroll >= 50) {
$(".header-widget").removeClass("header-widget-tallheader");
$(".header-widget").addClass("header-widget-shortheader");

} else {
$(".header-widget").removeClass("header-widget-shortheader");
$(".header-widget").addClass("header-widget-tallheader");
}
});
});

由于标准[1]中禁止在Wordpress中使用脚本标签，因此我选择安装" Scripts n Styles"插件，这显然可以克服该限制。然后，我插入了上面的代码，使其显示在head标记中。

然而不幸的是，什么也没有发生。脚本标记仍未处理吗？我的编码有误吗？还是应该使用AJAX [2]？如果是后者，我会通读W3Schools AJAX教程[3]，但不确定在这种情况下如何应用它。

在此先感谢您是否有任何帮助。我花了很多时间研究这个问题，但似乎仍然是一个初学者，因此，如果有任何答案可以尽可能描述性地表示，我将不胜感激。

脚注：

由于论坛声誉的限制，我本来要包含的链接却不能：

[1] https://www.godaddy.com/garage/webpro/wordpress/3-ways-to-insert-javascript-into-wordpress-pages-or-posts/

[2] https://stackoverflow.com/questions/28356137/change-css-when-scroll-down-using-php

[3] http://www.w3schools.com/ajax/default.asp

您的代码是正确的，只需在其之前添加$ = jQuery;。

正确的代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

$ = jQuery;
$(function() {
//caches a jQuery object containing the header element
var header = $(".header-widget");
$(window).scroll(function() {
var scroll = $(window).scrollTop();

if (scroll >= 50) {
$(".header-widget").removeClass("header-widget-tallheader");
$(".header-widget").addClass("header-widget-shortheader");

} else {
$(".header-widget").removeClass("header-widget-shortheader");
$(".header-widget").addClass("header-widget-tallheader");
}
});
});