滚动添加/删除类(Wordpress）

Add/remove classes on scroll (Wordpress)

本文关键字：Wordpress 删除 添加 滚动      更新时间：2023-09-26

当用户向下滚动页面50像素时，我试图使小部件添加一个类，删除一个类；当用户再次向上滚动时，则相反。

网站：此处链接

平台：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");
        }
    });
});

由于Wordpress中禁止使用脚本标记作为标准[1]，我选择安装"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;即可。

更正代码

$ = 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");
        }
    });
});

尝试将脚本更改为：

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版本无法识别$

以下代码非常适合我：这里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>
相关文章：