源生实现滚动页面显示悬浮导航

来源：互联网发布：meshlab shader 编程编辑：程序博客网时间：2024/06/16 16:30

很多网页中都有当我们滚动页面到一定的高度时就会显示悬浮导航，这个效果用jquery实现很简单，只要用 slideDown( )实现，今天主要分享源生JS实现这个效果；
HTML代码：

<header><h1>header</h1></header><div id="nav">    <ul>        <li><a href="#">首页</a></li>        <li><a href="#">秒杀</a></li>        <li><a href="#">女装馆</a></li>        <li><a href="#">内衣馆</a></li>        <li><a href="#">美妆馆</a></li>        <li><a href="#">品牌特卖</a></li>        <li><a href="#">团购频道</a></li>        <li><a href="#">每周上新</a></li>    </ul></div><div id="cloths"><h1>cloths</h1></div><div id="shoes"><h1>shoes</h1></div><div id="toys"><h1>toys</h1></div>

CSS代码：

*{ margin: 0; padding: 0; }header{ height: 200px; background: #f2f2f2; font-weight: bold; text-align: center; line-height: 200px; }#nav{ width: 100%; height: 50px; background: #333; }#nav ul{ width: 900px; margin: 0 auto; }#nav li{ list-style: none;  float: left; }#nav li a{ font-size: 16px; height: 50px; color: #fff; padding: 0 30px; line-height: 50px; text-decoration: none; display: inline-block; }#nav li a:hover{ background: #666; }#cloths{ height: 600px; background: #bbb; font-weight: bold; text-align: center; line-height: 400px; }#shoes{ height: 600px; background: #aaa; font-weight: bold; text-align: center; line-height: 400px; }#toys{ height: 600px; background: #999; font-weight: bold; text-align: center; line-height: 400px; }.fixed{ position: fixed; top: 0; left: 0; animation-name: show; animation-duration: 0.5s; }@keyframes show{    from{ top: -50px; }    to{ top: 0; }}

JS代码：

window.onload = function(){    var nav = document.getElementById("nav");    var shoes = document.getElementById("shoes");    scrollMenu( nav,shoes );}function scrollMenu( obj,target ){    window.onscroll = function(){        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;        var top = target.offsetTop;        //当滚动高度大于目标元素的位置，导航条显示        if( scrollTop>=top ){            obj.className = "fixed";        }else{            obj.className = "";        }    }}

阅读全文

0 0