網頁定位導航特效

標籤：blog   http   io   java   ar   for   div   問題   cti   

最近在學習慕課網-網頁定位導航特效的課程，這個算是學習完成的經驗總結吧。通過學習這一課，get了以下幾個小技巧。

1. css小技巧：在content的右邊設定一個fixed的菜單該如何定位？先設定左邊定位50%，然後設定向右位移400px,這樣就位於content的正右邊了。
2. 導航與捲軸之間的關係，我實在不能講得更好了，直接盜老師的圖好了。

   其實就是比較向上滾動的距離與每個樓層之間的距離，如果該樓層已經滾了上去，那就可以設定為焦點。

我實在解釋不清了，不知以後我自己看能不能看懂了。啥也不說了，直接上核心代碼好了。

        //1、捲軸發生滾動時，要擷取相應的值。            $(document).scroll(function(){                  var items = $("#content").find(".item");                var top = $(document).scrollTop();                var menu = $("#menu");                                var currentId = "";                 //2、讓導覽功能表實現在捲軸滾動的時候自動化佈建焦點                items.each(function(index, element) {                    var m = $(this);                    var itemTop = m.offset().top;                    if(top>itemTop-200){//-200為了增加使用者體驗，如果不加的話，圖片與菜單並不十分同步                        currentId = "#" + m.attr("id");                    }else{                        return false;                    }                                    });                                //console.log(top);                //3、給相應樓層的a 設定 current，取消其他連結的current                var oldLink = menu.find(".current");                if(currentId && oldLink.attr("href")!= currentId){                    oldLink.removeClass("current");                    menu.find("[href="+currentId+"]").addClass("current");                }            });        

由於最近在看《javascript進階程式設計》，又改了一版原生js版。道理相同，下面依然是貼代碼。

        window.onscroll = function(){                //js相容性的問題                var top = document.body.scrollTop || document.documentElement.scrollTop;                var menu = document.getElementById("menu");                var items = document.getElementById("content").getElementsByTagName("div");                var currentId = "";                //原生沒有each()方法，只能用for迴圈了                for(var i=0,length=items.length;i<length;i++){                    var m = items[i];                    var itemTop = m.offsetTop;                    if(top>itemTop-200){                        currentId = "#" + m.id;                    }else{                        break;                    }                }                //console.log(top);                                var oldLink = menu.getElementsByClassName("current")[0];                if(currentId && oldLink.href!= currentId){                    oldLink.className="";                    var num = currentId.substr(currentId.length-1);                    document.getElementById("link"+num).className="current";                    //比jq版來說，多了一個menu->a的id屬性，以便能取到相應的元素                }            };        

終於搞定了，這麼點點的東西，花了一晚上的時間，歸根結底還是基礎文法不熟，用的時候到處去查。感覺程式如文章，文法如文字，只有文法熟了，才能言為心聲。呵呵，又雞湯了。

最後要說的是，已把代碼上傳到了CSDN上，大家可以免積分下載點我進入下載頁

不支援IE6，js也有教程，不過這一版JS是我自己琢磨的~

網頁定位導航特效