导航菜单
智能隐藏显示顶部导航菜单
PetitQ
这是一款使用 js 和 css3 制作的智能隐藏和显示的顶部导航菜单。该顶部导航菜单在页面向下滚动时可以帧动画隐藏，在向上滚动到一定距离时优惠显示出来。
HTML 结构：
使用【header】元素作为该导航菜单的 HTML 结构：
也想出现在这里？联系我们吧
<header class="header-navigation" id="header">
<nav>
<a class="link" href="#" title="Home">首页</a>
<a class="link" href="#" title="About">关于我们</a>
<a class="link" href="#" title="Contact">联系我们</a>
</nav>
</header>
CSS 样式：
为导航菜单添加样式，使它固定在页面的顶部：
.header-navigation {
position: fixed;
top: 0;
width: 100%;
height: 60px;
line-height: 60px;
background-color: #333;
text-align: center;
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
导航菜单的隐藏和显示需要两个预定义的 class 类：
/*导航菜单向上滑动*/.slideUp {
-webkit-transform: translateY(-100px);
transform: translateY(-100px);
transition: transform .5s ease-out;
}/*导航菜单向下滑动*/.slideDown {
-webkit-transform: translateY(0);
transform: translateY(0);
transition: transform .5s ease-out;
}
JavaScript 代码：
通过下面的 JavaScript 代码，在页面滚动到合适的位置时，隐藏或显示导航菜单。
var new_scroll_position = 0;
var last_scroll_position;
var header = document.getElementById("header");
window.addEventListener('scroll', function(e) {
last_scroll_position = window.scrollY;
// 向下滚动if (new_scroll_position < last_scroll_position && last_scroll_position > 80) {
header.classList.remove("slideDown");
header.classList.add("slideUp");
// 向上滚动} else if (new_scroll_position > last_scroll_position) {
header.classList.remove("slideUp");
header.classList.add("slideDown");
}new_scroll_position = last_scroll_position;
});
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
