公众账号

二维码 微信扫描关注

当前位置:首页 > 技术文章 > 前端开发 >

下拉 JQuery 固定导航

有很多同学喜欢把导航定在头部,但并不是一开始就定在哪里,需要往下拉一定距离才执行,下面写了一个简单的方法:

下拉 JQuery 固定导航_www.uibq.com

需求是滚动条往下拉300像素时导航固定,看一下demo的演示地址

演示地址

新建一个HTML:

<div id="wrap">
    <div id="nav">HelloWeb-前端网 【固定导航】</div>
</div>

定义下简单的样式:

*{margin:0;padding:0;}
#wrap{
    height:9000px;
    padding-top:300px;
    width:800px;
    margin:auto;
}
#nav{
    width:800px;
    height:50px;
    background:#099;
    color:#fff;
    line-height:50px;
    text-align:center;
}

脚本:

<script type="text/javascript" src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
    $(window).scroll(function(){
        if($(window).scrollTop()>300){
            $('#nav').css({'position':'fixed','top':'0'})
        }else{
            $('#nav').css({'position':'relative'})
        }
        
        });
});
</script>

完成!

    上一篇:WebStorm快捷键操作大全 下一篇:没有了
    关于 商务 项目 联系 友情链接网站地图 Copyright ©-2018 UiBQ版权所有(http://www.uibq.com)