如何将固定顶部导航栏的JS代码转为函数并添加至functions.php？

没问题，我来一步步教你怎么把这段导航栏固定的代码改成符合WordPress规范的函数，加到你的functions.php文件里。

首先，WordPress有自己的脚本加载规范，不建议直接把JS代码随便塞到functions.php里，我们可以用钩子来安全地输出这段脚本。下面给你两种方案，一种是原生JS版本（不依赖jQuery，更轻量），另一种是保留你原来的jQuery版本：

方案1：原生JS版本（推荐） #

这个版本不需要依赖jQuery，性能更好，而且现在大部分浏览器都支持原生的API。把下面的代码复制到你主题的functions.php文件末尾：

function add_sticky_navbar_script() {
    ?>
    <script>
        // 等DOM加载完成再执行
        document.addEventListener('DOMContentLoaded', function() {
            // 监听滚动事件
            window.addEventListener('scroll', function() {
                const navBar = document.getElementById('nav_bar');
                // 判断滚动距离，添加/移除固定类
                if (window.scrollY > 280) {
                    navBar.classList.add('navbar-fixed');
                } else {
                    navBar.classList.remove('navbar-fixed');
                }
            });
        });
    </script>
    <?php
}
// 把脚本挂到页面底部输出，不影响页面渲染速度
add_action('wp_footer', 'add_sticky_navbar_script');

方案2：保留jQuery的版本 #

如果你的主题已经加载了jQuery，或者你更习惯用jQuery写法，可以用这个版本：

function add_sticky_navbar_jquery_script() {
    // 先确认jQuery已经加载，如果没加载就自动加载它
    if (!wp_script_is('jquery', 'enqueued')) {
        wp_enqueue_script('jquery');
    }
    ?>
    <script>
        jQuery(document).ready(function($) {
            $(window).scroll(function() {
                if ($(window).scrollTop() > 280) {
                    $('#nav_bar').addClass('navbar-fixed');
                } else {
                    $('#nav_bar').removeClass('navbar-fixed');
                }
            });
        });
    </script>
    <?php
}
add_action('wp_footer', 'add_sticky_navbar_jquery_script');

重要注意事项： #

• 先备份文件！ 修改functions.php之前一定要备份，万一代码写错会导致网站无法访问，备份后可以随时恢复。
• 别忘了你的CSS里必须要有.navbar-fixed的样式，不然导航栏不会有固定效果，比如：

.navbar-fixed {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 9999;
    background-color: #fff; /* 根据你的主题调整背景色 */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* 可选，添加阴影增强视觉效果 */
}

• 如果你用的是子主题，一定要修改子主题的functions.php，不要改父主题的，不然主题更新后你的代码会丢失。

内容的提问来源于stack exchange，提问作者Maria Anagnostou