JS implements navigation bar hover effect (continued)_javascript skills

Last time [JS-implementing navigation bar hover] mentioned that when the page where the navigation bar is hovered is run on IE, the navigation bar will keep shaking.

The solution is as follows:

Changed the positioning method of the navigation bar from absolute to fixed. I don’t know why it was changed to fixed, but it stopped shaking. . -_-||

Copy code The code is as follows:

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

For this reason, JS must also be modified accordingly.

Because fixed positioning is based on the browser’s visible area, the original positioning of the navigation bar must be changed.

Copy code The code is as follows:

//Record the original position of the navigation bar on the page
var naviga_offsetTop = 0;
var naviga_offsetLeft = 0;

//IE7 does not recognize getElementsByClassName. For compatibility, customize a
function my_getElementsByClassName(class_name) {
var el = [] ;
//Get all elements
_el = document.getElementsByTagName('*');
//Select by className
for (var i=0; i<_el.length; i ) {
if (_el[i].className == class_name ) {
el[el.length] = _el[i];
}
}
return el;
}

//Navigation bar, hover at the top
function naviga_stay_top(){
var a_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 .documentElement.scrollTop;

document.title = scrollTop;
//If the scrolling distance is greater than the distance between the original navigation bar and the top
//Directly fix the navigation bar to the visual area Top
if( scrollTop > naviga_offsetTop ){
a_navigation_bar[0].style.top = 0 "px";
} else {
//If the scrolling distance is smaller than the original navigation bar distance from the top, recalculate the position of the navigation bar
a_navigation_bar[0].style.top = (naviga_offsetTop - scrollTop) "px";
}
}

//give Four tabs on the navigation bar, plus click events.
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 between the navigation bar and 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);
}

//Get the position of the navigation bar to the top on 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");
}
//Get offsetTop
naviga_offsetTop = a_navigation_bar[0].offsetTop;
a_navigation_bar[0].style.left = naviga_offsetLeft "px";

//Add scrolling events to the scroll bar and mouse
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 question, it is important to understand the difference between CSS DIV positioning (relative, absolute, static, fixed).

relative,absolute,static,fixed

Let’s first look at the definition of each attribute value:

1. static: default value. Without positioning, the element appears in normal flow (ignoring top, bottom, left, right or z-index declarations).

2. Relative: Generate a relatively positioned element and position it relative to its normal position through the settings of top, bottom, left, and right. Hierarchical classification can be done through z-index.

3. Absolute: Generate an absolutely positioned element and position it relative to the first parent element other than static positioning. The position of the element is specified via the "left", "top", "right" and "bottom" attributes. Hierarchical classification can be done through z-index.

4. fixed: Generate absolutely positioned elements and position them relative to the browser window. The position of the element is specified via the "left", "top", "right" and "bottom" attributes. Hierarchical classification can be done through z-index.

The positioning methods of static and fixed are easy to understand and will not be analyzed here. The following is an analysis of the commonly used relative and absolute:

1. relative. An element positioned relative is removed from the normal text flow, but its position in the text flow still exists. As shown in Figure 1:

Figure 1
The layer with the yellow background is positioned relative, and the red border area is its position in the normal flow. After positioning it through top and left, you can see from the position of the gray background layer that its normal position still exists.

2. Absolute. A layer positioned as absolute is separated from the normal text flow, but the difference from relative is that its position in the normal flow no longer exists. As shown in Figure 2:

Figure 2
As you can see, after positioning the yellow background layer as absolute, the gray background layer is automatically filled in.

3. The main difference between relative and absolute:

First of all, it is whether the position in the normal flow exists or not as mentioned above.

Secondly, the relative positioned layer is always relative to its nearest parent element, no matter how its parent element is positioned. As shown in Figure 3:

Figure 3
In the figure, the red background layer is relative positioned, and the green background layer of its direct parent element is static positioned by default. The position of the red background layer is the top and left 20 elements relative to the green background layer. And if the red background layer is positioned as absolute, the situation is as shown in Figure 4:

Figure 4
As you can see, the red background layer still defines top:20px; left: 20px; but its relative element becomes a yellow background layer with absolute or relative positioning mode. Therefore, a layer positioned for absolute is always relative to its nearest parent layer defined as absolute or relative, and this parent layer is not necessarily its direct parent layer. If absolute or relative is not defined in its parent layer, it will be positioned relative to the body, as shown in Figure 5:

Figure 5
Except top, left, and right In addition to bottom positioning, the definition of margin attribute value also conforms to the above rules.