我正在尝试使小部件在用户向下滚动页面50px时添加一个类并删除一个类, 并在用户再次向上滚动时反转该过程。
网站:链接到这里
平台:WordPress
主题:Customizr-child
【滚动添加/删除类(WordPress)】我尝试影响的小部件已将header-widget类应用于该小部件。这个论坛主题促使我创建了:
$(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
#1你的代码是正确的, 只需添加$ = jQuery; 在那之前。
正确的代码
$ = 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");
}
});
});
#2尝试将脚本更改为:
jQuery(function() {
//caches a jQuery object containing the header element
var header = jQuery(".header-widget");
jQuery(window).scroll(function() {
var scroll = jQuery(window).scrollTop();
if (scroll >
= 50) {
jQuery(".header-widget").removeClass("header-widget-tallheader");
jQuery(".header-widget").addClass("header-widget-shortheader");
} else {
jQuery(".header-widget").removeClass("header-widget-shortheader");
jQuery(".header-widget").addClass("header-widget-tallheader");
}
});
});
WordPress附带的jQuery版本无法识别$
#3下面的代码对我来说是完美的:.page_header是我主题的标头类。
<
script>
jQuery(function() {
//caches a jQuery object containing the header element
var header = jQuery(".page_header");
jQuery(window).scroll(function() {
var scroll = jQuery(window).scrollTop();
if (scroll >
0) {
jQuery(".page_header").removeClass("header-widget-tallheader");
jQuery(".page_header").addClass("header-widget-shortheader");
} else {
jQuery(".page_header").removeClass("header-widget-shortheader");
jQuery(".page_header").addClass("header-widget-tallheader");
}
});
});
<
/script>
推荐阅读
- 在默认的WordPress类别小部件周围添加跨度
- 以编程方式添加带有类别的帖子
- 将元框图像上传选项添加到选项页面
- 在WordPress中为自定义帖子类型添加多个日期
- 从WordPress自定义主题中的标准样式添加Jquery
- WP在图像上添加文本
- 将产品添加到店面主页上的最畅销产品列表中
- 在WordPress网站中添加”加入群组”按钮
- 关于graalvm 的一些官方QA