现在位置:首页 » 代码修改 »

亲测可用的js代码实现浮动导航

心岛发布于2015年01月11日  分类: 代码修改  浏览:6626 人次  评论:1 

今天在倒腾一站点时发现找不到浮动导航的js特效代码了,而网上搜罗了半天,找了一大堆,结果挨个测试后发现只有下面的代码完美实现了这一效果,效果如下图所示:

QQ截图20150111233119.jpg

以下为方便演示的代码,其中此代码的原理就是:通过计算滚动条的scrolltop值是否大于等于浮动导航的top值;如果大于fix到顶部,浏览器就绝对定位导航并计算距离,会产生震动。代码如下:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="css/base.css" media="all"/>
    <style type="text/css">
    .wrapper{width:1000px;height:2000px;margin-left:auto;margin-right:auto;}
    .header{height:150px;}
    #nav{padding:10px;position:relative;top:0;background:black;width:1000px;}
    a{display:inline-block;margin:0 10px;*display:inline;;color:white;}
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="header"></div>
        <div id="nav">
            <a href="#">11111</a>
            <a href="#">22222</a>
            <a href="#">33333</a>
            <a href="#">44444</a>
            <a href="#">55555</a>
        </div>
    </div>
    <script type="text/javascript">
    function menuFixed(id){
    var obj = document.getElementById(id);
    var _getHeight = obj.offsetTop;
     
    window.onscroll = function(){
        changePos(id,_getHeight);
    }
}
function changePos(id,height){
    var obj = document.getElementById(id);
    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    if(scrollTop < height){
        obj.style.position = 'static';
    }else{
        obj.style.position = 'absolute';
        obj.style.top = scrollTop + 'px';
    }
}
window.onload = function(){
    menuFixed('nav');
}
    </script>
</body>
</html>

大家注意js代码中的

menuFixed('nav');

一项,这一项种的nav是和导航栏的id一致的,如果你的id为menu或者navi或者xindaocn.com,那么html代码中也要做出相应的调整!

另外,js代码的使用方式非常灵活可以将代码单独放在页面中也可以和放置在别的js文件中整合使用!

本文由心岛原创或编辑,转载请保留链接【亲测可用的js代码实现浮动导航】http://www.liangxin.name/?post=1012
本文标签: js代码修改 代码修改
上一篇: z-blog自定义字段使用教程
下一篇:免费外链又添新技巧——站长之家增设签名模块了
目前有 1 条评论
avatar
全网目录 2015-08-02 15:29回复
拿来试试用看