JS implements navigation bar hover effect (continued 2)_javascript skills

[JS-implement navigation bar hover]
[JS-implement navigation bar hover (continued)]

After rewriting this page with Jquery , found that the original method still has several problems:

1. First of all, the Js code is redundant, and the Tab on the navigation bar uses js to implement jumps instead of hyperlinks;

2 .Also the navigation bar itself is positioned with fixed, but it is not set to be horizontally centered. Instead, the left value is changed in JS to center it.

Problem 2 results in that when the size of the browser window changes, the position of the div in the browser changes, which results in the inability to dynamically fix the fixed div through the div in the page. Position the navigation bar to locate.

The final code changes are as follows:

test.html

Copy code The code is as follows:

> ;

1

> ;

tab1

tab2

tab3

tab4

3

4 div>

5

6

7

test.js

Copy code The code is as follows:

//Record navigation bar Original position on the page
var naviga_offsetTop = 0;

//Make the navigation bar hover at the top
function naviga_stay_top(){
//Get the scroll distance
var scrollTop = $(document).scrollTop();
//If the scrolling distance is greater than the distance of the original navigation bar from the top
//Directly fix the navigation bar to the top of the visual area
if( scrollTop > naviga_offsetTop ){
$("#nav").css({"top": "0px"});
} else {
//If the scrolling distance is small, the original navigation The distance between the bar and the top, then recalculate the position of the navigation bar
$("#nav").css({"top": naviga_offsetTop - scrollTop "px"});
}
}

function onload_function(){
//Record the height of the initial navigation bar
naviga_offsetTop = $("#nav").attr("offsetTop");

//Tie Fixed scrolling and mouse events
$(window).bind("scroll", naviga_stay_top);
$(window).bind("mousewheel",naviga_stay_top);
$(document).bind(" scroll", naviga_stay_top);
$(document).bind("mousewheel",naviga_stay_top);
}

$(document).ready( onload_function );

test.css: Pay attention to the style of navigation class

Copy the code The code is as follows:

div.main{
width: 800px;
background: #CCC;
margin: 10px auto 0;
position: relative;
}

div.content{
width: 800px;
height: 400px;
background: yellow;
margin: 10px auto 0;
}

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

div.tab{
width: 195px;
height: 40px;
background: blue;
float: left;
margin-left: 5px;
}

Summary:

The reason for this problem is that I am not familiar with the layout positioning of CSS.

You cannot pass: margin 0 auto; to set the navigation bar div to be horizontally centered, because fixed positioned elements cannot be positioned in this way.

Elements positioned with margin 0 auto; cannot be fixed positioned, and their parent elements must have a fixed width.

So how to center the fixed positioned element horizontally?

By: left: 50%, align the leftmost point of the element with the midpoint of the width of the parent element, and then use margin-left: [1/2 of the width of the element]px; to align this element Moves its width generally to the left, thus centering this element.