Web Location Navigation effects

Recently in the Learning Network-web positioning navigation effects of the course, this is a learning to complete the experience of the summary bar. By learning this lesson, get a few tips below.

1. CSS tips: How to position a fixed menu on the right side of the content? Set the left position to 50% and then set the right offset to 400px, which is right on the content.
2. The relationship between navigation and scroll bar, I really can not speak better, directly stole the teacher's picture.

   In fact, it is the distance between the upward scrolling distance and each floor, if the floor has been rolled up, it can be set as the focus.

I really can't explain it, I don't know if I can see it later. Do not say anything, directly on the core code good.

        1. To get the corresponding value when scrolling occurs.                $ (document). Scroll (function () {var items = $ ("#content"). Find (". Item");                var top = $ (document). ScrollTop ();                                var menu = $ ("#menu");                 var currentid = "";                    2. Let the navigation menu implement the focus Items.each automatically when the scroll bar scrolls (function (index, Element) {var m = $ (this);                    var itemtop = M.offset (). Top;                    if (top>itemtop-200) {//-200 in order to increase the user experience, if not added, the picture and menu is not very synchronized CurrentID = "#" + m.attr ("id");                    }else{return false;                                }                                    });                Console.log (top);                3, to the corresponding floor of a set current, cancel the other link of the current var Oldlink = Menu.find (". Current");                if (CurrentID && oldlink.attr ("href")! = CurrentID) {oldlink.removeclass ("current");    Menu.find ("[href=" +currentid+ "]"). AddClass ("current");         }            });

Since the recent reading of the JavaScript advanced programming, but also changed a version of the native JS version. The same reason, the following is still a sticker code.

        Window.onscroll = function () {//JS compatibility problem var top = Document.body.scrollTop | | docume                Nt.documentElement.scrollTop;                var menu = document.getElementById ("menu");                var items = document.getElementById ("content"). getElementsByTagName ("div");                var currentid = ""; Native does not have each () method and can only be used for looping 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";         More than the JQ version, a menu->a id attribute to be able to fetch the corresponding element}};

Finally fix, so little things, spent a night of time, in the final analysis or basic grammar is not familiar, when used everywhere to check. Feel the procedure such as article, grammar like text, only grammar ripe, can words are. Oh, and chicken soup again.

The final point is that the code has been uploaded to the csdn, you can free points download points I go to the download page

Do not support IE6,JS also has a tutorial, but this version of JS is my own pondering ~

Web Location Navigation effects