JS-implement navigation bar hover (continued)

The solution is as follows: Change the Positioning Method of the navigation bar from absolute to fixed, and do not know why it is changed to fixed .. -_-| Divnavigation {width: 800px; height: 40px; background: red solution: Change the Positioning Method of the navigation bar from absolute to fixed, I don't know why I changed to fixed .. -_-|

div.navigation{      width: 800px;      height: 40px;      background: red;      margin: 4px auto 0;       top: 400px;      left: 0px;      position: fixed;  }  

 

To this end, JS also needs to be modified accordingly. Because fixed positioning is based on the visible area of the browser, the positioning for the navigation bar has to be changed.

// Record the original location of the navigation bar on the page var naviga_offsetTop = 0; var naviga_offsetLeft = 0; // IE7 does not recognize getElementsByClassName. to be compatible with the custom function my_getElementsByClassName (class_name) {var el = []; // obtain all elements _ el = document. getElementsByTagName ('*'); // select for (var I = 0; I <_ el. length; I ++) {if (_ el [I]. className = class_name) {el [el. length] = _ el [I] ;}} return el ;}// navigation bar, hovering over top function naviga_stay_top () {var _ Navigation_bar = []; if (document. getElementsByClassName) {// Chrome, FF a_navigation_bar = document. getElementsByClassName ("navigation");} else {// IE a_navigation_bar = my_getElementsByClassName ("navigation");} var scrollTop = document. body. scrollTop | document.doc umentElement. scrollTop; document. title = scrollTop; // if the scroll-down distance is greater than the distance from the original navigation bar to the top of the navigation bar // directly pin the navigation bar to the top of the visible area if (scrollTop> naviga_offsetTop) {a_n Avigation_bar [0]. style. top = 0 + "px";} else {// If the downward scrolling distance is smaller than the distance from the original navigation bar to the top, recalculate the navigation bar position a_navigation_bar [0]. style. top = (naviga_offsetTop-scrollTop) + "px" ;}}// Add a click event to the four tabs on the navigation bar. Window. onload = function () {var a_tabs = []; if (document. getElementsByClassName) {// Chrome, FF a_tabs = document. getElementsByClassName ("tab");} else {// IE a_tabs = my_getElementsByClassName ("tab");} var a_contents = []; if (document. getElementsByClassName) {// Chrome, FF a_contents = document. getElementsByClassName ("content");} else {// IE a_contents = my_getElementsByClassName ("content");} // get offsetLeft, that is, the distance from the navigation bar to the Left Border var a_main_div = []; if (document. getElementsByClassName) {// Chrome, FF a_main_div = document. getElementsByClassName ("main");} else {// IE a_main_div = my_getElementsByClassName ("main");} naviga_offsetLeft = a_main_div [0]. offsetLeft; a_tabs [0]. onclick = function () {window. scrollTo (0, a_contents [2]. offsetTop);} a_tabs [1]. onclick = function () {window. scrollTo (0, a_contents [3]. offsetTop);} a_tabs [2]. onclick = function () {window. scrollTo (0, a_contents [4]. offsetTop);} a_tabs [3]. onclick = function () {window. scrollTo (0, a_contents [5]. offsetTop);} // obtain the position from the navigation bar to the top of the page. var a_navigation_bar = []; if (document. getElementsByClassName) {// Chrome, FF a_navigation_bar = document. getElementsByClassName ("navigation");} else {// IE a_navigation_bar = my_getElementsByClassName ("navigation");} // obtain offsetTop naviga_offsetTop = a_navigation_bar [0]. offsetTop; a_navigation_bar [0]. style. left = naviga_offsetLeft + "px"; // Add the scroll event if (window. attachEvent) // IE {window. attachEvent ("onmousewheel", naviga_stay_top); window. attachEvent ("onscroll", naviga_stay_top); document. attachEvent ("onmousewheel", naviga_stay_top); document. attachEvent ("onscroll", naviga_stay_top);} else {// Chrome, FF window. addEventListener ("mousewheel", naviga_stay_top, false); window. addEventListener ("scroll", naviga_stay_top, false); document. addEventListener ("mousewheel", naviga_stay_top, false); document. addEventListener ("scroll", naviga_stay_top, false );}}

 

In this case, it is important to understand the difference between CSS + DIV positioning (relative, absolute, static, fixed ).