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

很多网页中都有当我们滚动页面到一定的高度时就会显示悬浮导航,这个效果用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 = "";
        }
    }
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值