[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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Test. js
// Record the original position of the navigation bar on the page var naviga_offsetTop = 0; // place the navigation bar and hover it over the top function naviga_stay_top () {// obtain the scrolling distance var scrollTop = $ (document ). scrollTop (); // if the scroll-down distance is greater than the distance from the original navigation bar to the top of the navigation bar // directly pin the navigation bar to the top of the visible area if (scrollTop> naviga_offsetTop) {$ ("# nav" ).css ({"top": "0px"});} else {// if the distance from the original navigation bar to the top is small, then recalculate the navigation bar position $ ("# 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 the 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.
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.
Reference: http://ljj284860475.blog.163.com/blog/static/81423862009102713414312/