html顶部导航栏隐藏,js和css3智能隐藏和显⽰的顶部导航菜单这是⼀款使⽤js和css3制作的智能隐藏和显⽰的顶部导航菜单。该顶部导航菜单在页⾯向下滚动时可以帧动画隐藏，在向上滚动到⼀定距离时优惠显⽰出来。
使⽤⽅法
HTML结构
使⽤元素作为该导航菜单的HTML结构：
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 = ElementById("header");
window.addEventListener('scroll', function(e) {
last_scroll_position = window.scrollY;
// 向下滚动
if (new_scroll_position < last_scroll_position && last_scroll_position > 80) { ve("slideDown");
header.classList.add("slideUp");
// 向上滚动
} else if (new_scroll_position > last_scroll_position) {
ve("slideUp");
header.classList.add("slideDown");
}
new_scroll_position = last_scroll_position;
});

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。