这次跟大家分享两个让 Elementor 菜单可以更有设计感的方式
效果1
视频里面展示的第一种需要用到2个container，做两个菜单，它们可以完全不一致，甚至菜单内容都换掉。你明白它们是两个不同的菜单就行。
把下面的代码用 HTML widget 放到要消失的菜单里，再给整个 container CSS ID 写上 “hdmenu”
<script>
document.addEventListener('DOMContentLoaded', function() {
document.addEventListener('scroll', function() {
let y = window.scrollY;
let menuhopin = document.getElementById('hdmenu');
if (y > 150) { /* change this value here to make it show up at your desired scroll location. */
menuhopin.classList.add('headershow');
} else {
menuhopin.classList.remove('headershow');
}
});
});
</script>
<style>
.elementor-nav-menu__container{
top:0px!important;
}
#hdmenu.headershow{
transform: translateY(0);
}
#hdmenu{
position: fixed;
top:0;
width: 100%;
transform: translateY(-200px); /*adjust this value to the height of your header*/
}
</style>消失的菜单需要 z-index 调高点，不然会被内容掩盖。
刚刚放入的 HTML 组件建议隐藏掉，不然会带一个看不见高度，隐藏并不会让代码无效。你感兴趣的话可以看看怎么让元素完全消失在网站上。
效果2
这个效果和上面的很类似，你可以再效果一的基础上叠加这个，或者直接在一个菜单（container）上做也行。
把下面的代码粘贴到 Elementor 自定义代码上，选择 <body> – Start，CSS ID 也是 “hdmenu” 同时 CSS CLASS 也给它写上（这个名字你可以自己在代码里面调整）
<script>
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
if (prevScrollpos > currentScrollPos) {
document.getElementById("hdmenu").style.top = "0";
} else {
document.getElementById("hdmenu").style.top = "-100px";
}
prevScrollpos = currentScrollPos;
}
</script>
如果你是只在一个菜单上做这个效果，没有加上面的效果一，你还需要开 Sticky top 效果。
.hdmenu {
transition: 0.3s !important;
}出场动画的速度你可以通过粘贴上面的代码到菜单的自定义 CSS 自己调整。
第二个效果我只在 Elementor PRO 上试过，你要是试过免费版的话，告诉我有没有用吧！
