我们现在看到许多网站都有浮动导航,它可以浮在网在顶部或,左或右,然后我们把网站向下拉时自己会根据屏幕内容切换导航的颜色,当然直接点击导航也可以跳到相应的内容。
这样的导航实现方式有很多种,我们可以直接使用框架实现,比如bootstrap,或amazeui...等前端框架都可以实现。但是在这里我还是要讲一下怎么手写这样的代码,如果你完全
理解别人的实现方法,直接应用也无防,如果你没有理解别人的方法而直接使用,那我还是想请你看一下这篇文章,我们在理解了最基本的方法后再使用会更好。下面一起来看例
子吧,这个例子是经过我测试完全可用的:

<html>
    <head> 
        <title>导航锚点</title>
        <link rel="stylesheet" href="css/nav.css">
        <script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
        <script type="text/javascript" src="js/nav.js"></script>
    </head>
    <body>
        <ul id="nav"> 
            <li class="tabs1">
            <a href="#part1">CSS课程</a></li>
            <li class="tabs2"><a href="#part2">JS课程</a></li>
            <li class="tabs3"><a href="#part3">CMS课程</a></li>
            <li class="tabs4"><a href="#part4">HTML课程</a></li>
            <li class="tabs5"><a href="#part5">运营课程</a></li>
        </ul>
        <div class="part1" id="part1">CSS课程</div>
        <div class="part2" id="part2">JS课程</div>
        <div class="part3" id="part3">CMS课程</div>
        <div class="part4" id="part4">HTML课程</div>
        <div class="part5" id="part5">运营课程</div>
    </body>
</html>

首先我们要创建一个HTML文档,内容如上,细心的朋友应该看到我们已经在文档中引入jquery,我们的导航是在jquery的基础上编写的。
接下来我们要给文档添加样式。

*{
    padding:0;
    margin:0;
}
#nav{
    background-color:#020202;
    position:fixed;
    left:0;
    top:0;
}
#nav li{
    display:inline;
    text-decoration:none;
    font-size:18px;
    line-height:58px;
    padding: 20px;
}
a{
    text-decoration:none;
    color:#fff;
}
.part1,.part2,.part3,.part4,.part5{
    height:500px;
}
.active{
    background:#f98307;
}

我们在样式的开头声明所有容器的边框及内间距为0,然后设置导航的坐标为浏览器的绝对位置,这样不管你划动到哪里它都是在浏览器的固定位置。
然后就是设置导航的颜色,字体等,最后是为了能有拉动的效果才把每个div都设置了高度,在实际应用中并不一定要这样设置,因为你有足够的内容。
好了,最后我们呈上js文件。

$(function(){
    $(window).scroll(function(){
        var wst = $(window).scrollTop();
        for(i = 1;i<=5;i++){
            var offs = $('.part'+i).offset().top;
            if(offs-wst<=60){
                $('#nav li').removeClass("active");
                $('.tabs'+i).addClass("active");                
            }
            
        }
    })
    $('#nav li').click(function(){
        $('#nav li').removeClass("active");
        $(this).addClass("active");
    }
    );
    
});

当你写好这三个文件,一切配置正确,运行结果应该如下:

浮动导航

现在我们解释一下js代码,$(window).scroll(function(){...})这段代码是获取浏览器滚动信息,应该是监听滚动事件,var wst = $(window).scrollTop();这
段代码是获取浏览器滚动的位置,for(i = 1;i<=5;i++)这里是循环5次检测对比,你有多少个菜单就让它循环多少次,var offs = $('.part'+i).offset().top;
这段代码是攻取内容距离浏览器滚动的位置,if(offs-wst<=60)然后判断内容到屏幕哪个位置,这里设置60是因为我们的导航条高度就有60px,所以我设置60,如
果你的导航条更高,或者你想在内容没到导航条就让它色,你可以设置更大值。$('#nav li').removeClass("active");$('.tabs'+i).addClass("active");这两句
是使用jquery方法给元素删除class,给相应的元素添加class,$('#nav li').click(function(){$('#nav li').removeClass("active");$(this).addClass("active");}
这段代码很容易懂,意思是点击导航栏时,把所有active的class都清除,在当前点击的导航上添加active的class。现在你应该完全理解浮动导航了吧。