添加主题额外CSS
WP – 外观 – 自定义，进入主题自定义页面。
点击进入“额外CSS”编辑界面。
添加下方CSS代码：
.custom-navbar {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: #fff; /* 设置背景颜色 */
z-index: 999;
transition: transform 0.3s ease; /* 设置过渡效果 */
}
.custom-navbar.hidden {
transform: translateY(-100%); /* 向上移动 100% */
}
记得保存发布。
为导航栏添加CSS类名
在Elementor 模板里打开Header模板进行编辑。
为导航栏容器添加CSS类名，“custom-navbar”。
使用Elementor Custom Code 添加JS代码
点击进入Elementor – Custom Code。
添加一个新的代码片段，位置选择“<body> – Start”。
粘贴下方JS代码到代码片段：
<script type="pmdelayedscript" data-cfasync="false" data-no-optimize="1" data-no-defer="1" data-no-minify="1">
document.addEventListener("DOMContentLoaded", function () {
let lastScrollTop = 0;
window.addEventListener("scroll", function () {
let navbar = document.querySelector(".custom-navbar");
let currentScroll = window.pageYOffset || document.documentElement.scrollTop;
if (currentScroll > lastScrollTop) {
// 向下滚动，隐藏导航栏
navbar.classList.add("hidden");
} else {
// 向上滚动，显示导航栏
navbar.classList.remove("hidden");
}
lastScrollTop = currentScroll <= 0 ? 0 : currentScroll; // 防止负值
});
});
</script>
