Add/remove 类滚动（Wordpress）

Question

我试图让小部件在用户向下滚动页面 50 像素时添加一个 class 并删除一个 class，并在用户再次向上滚动时反转该过程。

网站： Link here

平台： Wordpress

主题： Customizr-child

我试图影响的小部件应用了 header-widget class。 This forum thread 引导我创建：

$(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]

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

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

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

Answer 3

以下代码非常适合我：这里 .page_header 是我主题的 header class。

    <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>

Add/remove 类滚动（Wordpress）

Add/remove classes on scroll (Wordpress)

javascript

css

ajax

wordpress

wordpress-theming

Add/remove 类 滚动（Wordpress）

Add/remove classes on scroll (Wordpress)

javascript

css

ajax

wordpress

wordpress-theming

Add/remove 类滚动（Wordpress）