WordPress首页jQuery导航栏滚动显示功能添加判断后失效求助

看起来你遇到的核心问题是jQuery环境未正确初始化导致滚动事件绑定失效，另外用window.location.pathname判断首页也不够可靠（WordPress的首页可能因静态设置、 permalink 规则不同而变化）。下面给你两种可靠的解决方案：

方案一：用WordPress原生条件标签+jQuery兼容写法 #

直接在PHP层面判断是否为首页，避免JS路径判断的误差，同时确保jQuery正确加载：

<head>
<?php 
// WordPress原生首页判断，比JS路径判断更准确
if ( is_front_page() ) : 
?>
<script>
// 用jQuery的兼容写法，确保$可以正常使用
jQuery(document).ready(function($){
    // 页面加载时先设置导航栏为透明（首页初始状态）
    $('.navbar-bg').css("background-color", "transparent");

    // 绑定滚动事件
    $(window).scroll(function () {
        if ($(this).scrollTop() > 400) {
            $('.navbar-bg').css("background-color", "#3d3938");
        } else {
            $('.navbar-bg').css("background-color", "transparent");
        }
    });
});
</script>
<?php else : ?>
<script>
// 其他页面始终显示导航栏背景
jQuery(document).ready(function($){
    $('.navbar-bg').css("background-color", "#3d3938");
});
</script>
<?php endif; ?>
</head>

方案二：CSS类切换（更易维护，推荐） #

把样式和逻辑分离，用类来控制导航栏状态，还能添加过渡动画提升体验：

<head>
<style>
/* 给导航栏加过渡动画，切换更流畅 */
.navbar-bg {
    transition: background-color 0.3s ease;
}
/* 首页初始透明状态 */
.navbar-bg.nav-transparent {
    background-color: transparent;
}
/* 滚动后/其他页面的可见状态 */
.navbar-bg.nav-visible {
    background-color: #3d3938;
}
</style>

<?php if ( is_front_page() ) : ?>
<script>
jQuery(document).ready(function($){
    // 首页加载时添加透明类
    $('.navbar-bg').addClass('nav-transparent');

    $(window).scroll(function () {
        if ($(this).scrollTop() > 400) {
            $('.navbar-bg').removeClass('nav-transparent').addClass('nav-visible');
        } else {
            $('.navbar-bg').removeClass('nav-visible').addClass('nav-transparent');
        }
    });
});
</script>
<?php else : ?>
<script>
// 其他页面直接添加可见类
jQuery(document).ready(function($){
    $('.navbar-bg').addClass('nav-visible');
});
</script>
<?php endif; ?>
</head>

为什么你的原代码会失效？ #

1. jQuery未正确初始化：你的原代码中，首页判断的逻辑没有包裹在jQuery的兼容包装里，而WordPress默认是把jQuery放在页脚加载的，head里直接用$会导致$ is not defined的错误，滚动事件根本没绑定上。
2. 首页判断不准确：window.location.pathname == '/'只适用于默认 permalink 规则，如果你设置了静态首页或者自定义 permalink，这个判断就会失效，用WordPress的is_front_page()是最可靠的方式。

内容的提问来源于stack exchange，提问作者Rwzr Q