仅在 Wordpress 主页上的 jQuery 滚动操作答案

【问题标题】：jQuery scroll action only on Wordpress homepage仅在 Wordpress 主页上的 jQuery 滚动操作
【发布时间】：2017-09-20 06:50:44
【问题描述】：

我创建了代码以将固定类.menu-bar 添加到滚动菜单中。我的网站在 Wordpress 上，我只需要主页上的固定菜单。我已经尝试了一些我发现仅在主页上使用此代码的方法，但我是一个初学者，这些方法并没有按照我想要的方式工作。你能帮我解决这个问题吗？

我的代码：

$(window).scroll(function(){
var menu = $('.menu'),
  scroll = $(window).scrollTop();

  if (scroll >= 100) menu.addClass('menu-bar');
  else menu.removeClass('menu-bar');
});

谢谢！

【问题讨论】：

究竟是什么不工作？您是否在您的functions.php 中正确地将您的脚本排入队列？也许您可以提供指向您网站的链接？
如果您的主页/首页有一个特定的类（大多数主题实际上都有），那么您可以在将滚动事件侦听器绑定到 window 之前检查 <body> 元素是否具有该类对象。

标签： jquery wordpress scrolltop

【解决方案1】：

在您当前活动主题的functions.php中添加代码

如果您希望将此 scipt 放在主页上，请使用以下代码

add_action('wp_head','includeMyScript');
function includeMyScript()
{
    if(is_front_page() && is_home())
    {
       echo '<script type="text/javscript>
        $(window).scroll(function(){
            var menu = $(".menu"),
            scroll = $(window).scrollTop();

            if (scroll >= 100) menu.addClass("menu-bar");
            else menu.removeClass("menu-bar");
            });
        </script>';
    }

}

如果您希望在主页上关闭正文标记之前将此 scipt 放在页脚中，请使用以下代码

add_action('wp_footer','includeMyScript');
function includeMyScript()
{

   if(is_front_page() && is_home())
    {
       echo '<script type="text/javscript>
        $(window).scroll(function(){
            var menu = $(".menu"),
            scroll = $(window).scrollTop();

            if (scroll >= 100) menu.addClass("menu-bar");
            else menu.removeClass("menu-bar");
            });
        </script>';
    }
}

【讨论】：

嗨，我添加了你的代码，但我在第 68 行有错误消息 Parse error: syntax error, unexpected ''),' (T_CONSTANT_ENCAPSED_STRING), expecting ',' or ';' in ../public_html/wp-content/themes/my-theme/functions.php。就是这一行：if (scroll >= 100) menu.addClass('menu-bar');
重新检查代码我犯了语法错误，现在正在改革对不起......！
在输出中注入脚本通常不是一个好主意。
否则，您可以使用 wp_enque 脚本挂钩注入脚本，但您有四行代码，因为我建议您使用此解决方案，否则您可以创建一个文件并使用 wp_enque_script 操作注入它。
我已经尝试过了，它似乎不起作用...我在下面尝试并且它起作用了：if ( window.location.pathname == '/' ) { $(window).scroll(function(){ var menu = $('.menu'), scroll = $(window).scrollTop(); if (scroll >= 100) menu.addClass('menu-bar'); else menu.removeClass('menu-bar'); }); }

【解决方案2】：

使用您的 javascript 代码创建一个 JS 文件 (my-script.js)。放到主题的根目录下。

接下来，在主题的functions.php末尾添加以下行

function my_scripts() {
    if ( is_front_page() || is_home() ) {
        wp_enqueue_script( 'home-page-script', get_template_directory_uri() . '/my-script.js', array( 'jquery' ), false, false);
    }
}

add_action( 'wp_enqueue_scripts', 'my_scripts' );

wp_enqueue_script 注入 js 文件。在此处阅读有关文档的更多信息： wp_enqueue_script

【讨论】：