粘性导航功能的实现

粘性导航（Sticky Navigation）
功能描述：
1.初始状态：当页面处于顶部时，完整的头部区域（包含顶部信息栏、导航菜单等）会正常显示。
2.滚动行为：当用户向下滚动页面时，头部菜单会固定在页面的顶部位置，不会随着页面的滚动而消失。
3.返回顶部：若用户又向上滚动回到页面顶端，头部菜单会恢复到初始状态，重新显示出其上方的内容。

一、实现方式：在主题中添加 JavaScript 代码来监听滚动事件，并根据滚动位置动态调整导航栏的样式。

二、实现步骤：
1.确保导航栏有一个唯一的 ID，例如 #main-header：

2.在 style.css 中添加以下样式：

.headermenu.sticky {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999; /* 确保菜单在其他元素之上 */
  }

3 在header.php 文件添加 JavaScript 代码
在 header.php 文件的 标签结束之前添加以下 JavaScript 代码，用于监听滚动事件并添加或移除 sticky 类：

<script>
window.addEventListener('scroll', function() {
    var headermenu = document.querySelector('.headermenu');
    if (window.pageYOffset > 0) {
        headermenu.classList.add('sticky');
    } else {
        headermenu.classList.remove('sticky');
    }
});
</script>

代码解释

• CSS 部分：.headermenu.sticky 类定义了菜单固定时的样式，将其 position 设置为 fixed，使其固定在页面顶部，top 和 left 设置为 0 使其占据整个宽度，z-index 确保其在其他元素之上。
• JavaScript 部分：监听 scroll 事件，当滚动距离大于 0 时，为 headermenu 元素添加 sticky 类；当滚动回到顶部（滚动距离为 0）时，移除 sticky 类。