"Js-implementation navigation bar hover"
"Js-implementation navigation bar hover (cont.)"
After writing this page in jquery, there are several problems with the original method:
1. First JS code redundancy, Navigation bar tab is to use JS to achieve jump rather than hyperlinks;
2. There is also the navigation bar itself with fixed positioning, but not set to horizontal center, but in JS to change the left value to center it.
Problem 2 causes, when the browser window size changes, the position of the div in the browser has changed, but also lead to the page through the div dynamic to the fixed positioning of the navigation bar to locate.
The final code changes are as follows:
Test.html
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<script type= "Text/javascript" src= "Http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js" ></ Script>
<script type= "Text/javascript" src= "Test.js" ></script>
<link rel= "stylesheet" type= "Text/css" href= "Test.css" ></link>
<title>Test</title>
<body>
<div id= "Main_div" class= "main" >
<div id= "Content_div1" class= "content" >1</div>
<div id= "nav" class= "navigation" >
<a href= "#content_div3" ><div id= "tab_div1" class= "tab" >tab1</div></a>
<a href= "#content_div4" ><div id= "tab_div2" class= "tab" >tab2</div></a>
<a href= "#content_div5" ><div id= "Tab_div3" class= "tab" >tab3</div></a>
<a href= "#content_div6" ><div id= "tab_div4" class= "tab" >tab4</div></a>
</div>
<div id= "Content_div2" class= "content" >2</div>
<div id= "Content_div3" class= "content" >3</div>
<div id= "content_div4" class= "content" >4</div>
<div id= "content_div5" class= "content" >5</div>
<div id= "content_div6" class= "content" >6</div>
<div id= "content_div7" class= "content" >7</div>
</div>
</body>
Test.js
Copy Code code as follows:
Record where the navigation bar was originally on the page
var naviga_offsettop = 0;
To make a navigation bar, hover over the top
function Naviga_stay_top () {
Get scrolling distance
var scrolltop = $ (document). ScrollTop ();
If the scroll down is greater than the distance from the top of the original navigation bar
Secure the navigation bar directly to the top of the visual area
if (ScrollTop > Naviga_offsettop) {
$ ("#nav"). CSS ({"Top": "0px"});
} else {
If you scroll down the distance from the top of the original navigation bar, recalculate the position of the navigation bar
$ ("#nav"). CSS ({"Top": Naviga_offsettop-scrolltop + "px"});
}
}
function Onload_function () {
Record the height of the initial state navigation bar
Naviga_offsettop = $ ("#nav"). attr ("offsettop");
binding 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: Note the style of the navigation class
Copy Code code 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;
}
Summarize:
The reason for this problem is that the layout of the CSS is not familiar.
It's impossible to get through here: Margin 0 auto; To set the navigation bar div horizontally, because fixed-positioned elements cannot be positioned in this way.
The element that is positioned by margin 0 auto is not positioned for fixed, and its parent element must have a fixed width.
So how do you make fixed-positioned elements horizontally centered?
By: left:50% The element's leftmost point to the width of the parent element, and then the element is centered by marg-left: [1/2]px of the element's width, to move the element to the left of its width.
