我們現在看到許多網站都有浮動導航,它可以浮在網在頂部或,左或右,然后我們把網站向下拉時自己會根據屏幕內容切換導航的顏色,當然直接點擊導航也可以跳到相應的內容。
這樣的導航實現方式有很多種,我們可以直接使用框架實現,比如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?,F在你應該完全理解浮動導航了吧。