这是一款使用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; });
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!