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