Home > Developer > JavaScript
[JS-implement navigation bar hover]
[JS-implement navigation bar hover (continued )]
After re-writing this page with Jquery, I found that there are several problems with the original method:
1. First, Js Code redundancy. the Tab on the navigation bar uses js to achieve redirection rather than hyperlink;
2. The navigation bar itself is positioned with fixed, but is not set to horizontal center. Instead, the left value is changed in JS to center it.
Problem 2: When the browser window size changes, the position of the div in the browser changes, as a result, the navigation bar that has been positioned by fixed cannot be dynamically located through the div in the page.
The final code change is as follows:
Test.html
Copy codeThe Code is as follows:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Strict // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml" xml: lang = "en">
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Head>
<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>
</Head>
<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>
</Html>
Test. js
Copy codeThe Code is as follows:
// Record the original location of the navigation bar on the page
Var naviga_offsetTop = 0;
// Hover the navigation bar over the top
Function naviga_stay_top (){
// Obtain the rolling distance
Var scrollTop = $ (document). 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 ){
$ ("# Nav" ).css ({"top": "0px "});
} 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.
$ ("# Nav" ).css ({"top": naviga_offsetTop-scrollTop + "px "});
}
}
Function onload_function (){
// Record the height of the navigation bar in the initial state
Naviga_offsetTop = $ ("# nav"). attr ("offsetTop ");
// Bind scroll 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 the navigation class.
Copy codeThe 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 CSS layout positioning is unfamiliar.
In this case, you cannot set the horizontal center of the navigation bar div through: margin 0 auto; because the fixed positioning element cannot be located in this way.
The element to be located through margin 0 auto; cannot be positioned for fixed, and its parent element must have a fixed width.
So how can the elements positioned by fixed be horizontally centered?
Use: left: 50% to align the leftmost vertex of the element with the width of the parent element, and then use marg-left: [1/2 of the width of the element] px; to move the element to the left to center the element.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
