我想知道是否有人能帮我。我目前正在本地主机上使用foundation framework开发wordpress主题，我希望顶部栏可以使用jquery更改滚动条上的样式。我发现一个好的解决办法是。addClass或。removeClass基于用户滚动到顶部的距离。我补充道。激活到。我的css中的top bar类。对于jquery代码，我将代码放在一个无冲突的包装器中，因为wordpress要求您这样做。我在下面附上了我的代码，但它似乎根本不起作用。当我在JSFIDLE中测试jquery时，没有得到任何错误，但当我使用chrome开发工具测试jquery时，我在jquery中得到了一个错误，请在下面的代码中找到注释掉的错误：
My Jquery
jQuery(window).on("scroll", function($) {
if($(window).scrollTop() > 50) { //Uncaught TypeError: $ is not a function
$(".top-bar").addClass("active");
} else {
$(".top-bar").removeClass("active");
}
});
My CSS
.top-bar.active{
background: blue;
-webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
-moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
}
最合适的回答,由SO网友:corradomatt 整理而成
您需要在整个代码中完全引用jQuery。应该是。。。
jQuery(window).on("scroll", function() {
if(jQuery(window).scrollTop() > 50) {
jQuery(".top-bar").addClass("active");
} else {
jQuery(".top-bar").removeClass("active");
}
});
在无冲突模式下，您需要始终完整引用jQuery，而不使用
$. 当jQuery与其他库一起使用时，不存在防止冲突的冲突模式。与jQuery一样，其他一些JS库也使用$作为短引用。
如果要使用$ 作为在没有冲突时对jQuery的引用（正如WordPress所要求的那样），您总是可以这样做。。。。。
(function($) {
$(window).on("scroll", function() {
if($(window).scrollTop() > 50) {
$(".top-bar").addClass("active");
} else {
$(".top-bar").removeClass("active");
}
});
})(jQuery); // Fully reference jQuery after this point.
