Javascript implements navigation bar hover effect (continued) _ javascript skills

When the page on which the navigation bar was hovering last time runs on IE, there will be a problem of non-stop jitter in the navigation bar. This article provides a perfect solution, change the Positioning Method of the navigation bar from the original absolute to fixed. The last time you [JS-implement navigation bar hover] said that when the page in the navigation bar is running on IE, the navigation bar is constantly jitters.

The solution is as follows:

Change the Positioning Method of the navigation bar from absolute to fixed, and I don't know why I changed it to fixed .. -_-|

The Code is as follows:

P. 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.

The Code is as follows:

// Record the original location of the navigation bar on the page
Var naviga_offsetTop = 0;
Var naviga_offsetLeft = 0;

// IE7 does not recognize getElementsByClassName.
Function my_getElementsByClassName (class_name ){
Var el = [];
// Obtain all elements
_ El = document. getElementsByTagName ('*');
// Use className to 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 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.doc umentElement. scrollTop;

Document. title = scrollTop;
// If the scroll-down distance is greater than the distance from the original navigation bar to the top
// Directly pin the navigation bar to the top of the visible area
If (scrollTop> naviga_offsetTop ){
A_navigation_bar [0]. style. top = 0 + "px ";
} Else {
// If the scroll-down distance is smaller than the distance from the original navigation bar to the top, the position of the navigation bar is recalculated.
A_navigation_bar [0]. style. top = (naviga_offsetTop-scrollTop) + "px ";
}
}

// Add the 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 ");
}

// Obtain offsetLeft, that is, the distance between the navigation bar and the left border.
Var a_main_p = [];
If (document. getElementsByClassName) {// Chrome, FF
A_main_p = document. getElementsByClassName ("main ");
} Else {// IE
A_main_p = my_getElementsByClassName ("main ");
}
Naviga_offsetLeft = a_main_p [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 a scroll event 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 case, it is important to understand the difference between CSS + DIV positioning (relative, absolute, static, and fixed.

Relative, absolute, static, fixed

Let's take a look at the definition of each attribute value:

1. static: default value. The element is not located and appears in the normal stream (ignore the top, bottom, left, right, or z-index declarations ).

2. relative: Generate relative positioning elements and locate them by setting top, bottom, left, and right. You can perform hierarchical classification using z-index.

3. absolute: generates absolute positioning elements, which are located relative to the first parent element other than static positioning. The positions of elements are specified by the "left", "top", "right", and "bottom" attributes. You can perform hierarchical classification using z-index.

4. fixed: generate the absolute positioning element, which is located relative to the browser window. The positions of elements are specified by the "left", "top", "right", and "bottom" attributes. You can perform hierarchical classification using z-index.

Static and fixed positioning methods are easy to understand, so we will not analyze them here. The following analyzes the relative and absolute of applications:

1. relative. The element positioned as relative is removed from the normal text stream, but its position in the text stream still exists. 1:


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

2. absolute. The layer positioned as absolute is out of the normal text stream, but the difference with relative is that it does not exist in the normal stream. 2:


As you can see, after the yellow background layer is positioned as absolute, the gray background layer is automatically added.

3. Main differences between relative and absolute:

First, whether the position in the normal stream as mentioned above exists.

Second, the layer of relative positioning is always relative to its nearest parent element, regardless of the positioning method of its parent element. 3:


In the figure, the red background layer is relative, and the green background layer of the parent element is the default static location. The red background layer is located on the top and left 20 elements of the green background layer. If the red background layer is positioned as absolute, case 4:


As you can see, the red background layer still defines top: 20px; left: 20px; but its relative elements change to the yellow background layer with the positioning method absolute or relative. Therefore, the layer that absolute locates is always relative to the parent layer that is recently defined as absolute or relative, and this parent layer is not necessarily its direct parent layer. If absolute or relative is not defined in the parent layer, the relative body is located, 5:


In addition to top, left, right, and bottom positioning, the definition of the margin attribute value also complies with the preceding rules.