<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>滚动导航定位</title>
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<style>
*{
margin:0;
padding:0;
border:0;
font-size:100%;
font:inherit;
vertical-align:baseline
}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
display:block
}
body {
line-height:1
}
ol,ul {
list-style:none
}
blockquote,q {
quotes:none
}
blockquote:before,blockquote:after,q:before,q:after {
content:'';
content:none
}
table {
border-collapse:collapse;
border-spacing:0
}
#wrapper {
width:100%;
position:relative;
}
#container {
width:100%;
position:relative;
background:#303030;
z-index:-5;
}
header.home {
max-width:760px;
position:relative;
margin:0 auto;
text-align:center;
}
header.home img {
max-width:300px;
margin:0 auto;
position:relative;
text-align:center;
}
.home-title {
font-size:3em;
color:white;
margin:10px 0px 20px 0px;
}
.home-desc {
font-size:1.8em;
color:white;
margin:0px 0px 20px 0px;
line-height:1.3em;
}
#top_intro {
width:100%;
}
.le-background {
position:fixed;
top:0px;
left:0;
bottom:0;
right:0;
width:100%;
z-index:-2;
opacity:0.6;
background:#303030;
background-size:cover !important;
background-position:center;
background-repeat:no-repeat no-repeat;
}
.blurred {
opacity:0;
}
#mainMenuBar {
width:100%;
background-color:white;
z-index:100;
}
#mainMenuBar ul {
margin:0 auto;
text-align:center;
position:relative;
padding:20px;
border:1px solid black;
}
#mainMenuBar li {
display:inline-block;
color:black;
margin-left:30px;
font-size:1.2em;
font-weight:100;
}
#content {
width:100%;
position:relative;
background-color:white;
padding-top:20px;
}
#content p {
font-size:1.2em;
font-family:"proxima-nova";
font-weight:100;
max-width:640px;
margin:0 auto;
line-height:1.4em;
padding:10px 0px 10px 0px;
}
.stick {
position:fixed;
top:0;
}
.home {
background:# d7c4b4;
}
</style>
</head>
<body>
<header class="home">
<h1>I am the title</h1>
<div class="">I am the content under the heading I am under the heading Content I am content under heading I am content under heading I am content under heading I am content under heading I am content under heading I am content under heading I am content under heading I am content under heading I am content under heading I is the content under the header I am the content under the header I am the content under the header I am the content under the header I am the content under the header I am the content under the header </div>
</header>
<div id="mainMenuBarAnchor" ></div>
<div id="mainMenuBar">
<ul>
<li>Menu 1</li>
<li>Menu 2</li>
<li>菜单3</li>
<li>菜单4</li>
<li>菜单5</li>
</ul>
</div>
<div id="content" style="width: 800px;margin: 0 auto;">
I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI is the content I am the content I am the content I am the content I am the content I am the content I am the content I am the content I am the content I am the content I am the content I am the content I am the content I am the content I am the content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI is the content I am the content I am the content I am the content I am the content I am the content I am the content I am the content I am the content I am the content I am the content I am the content I am the content I am the content I am the content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am Content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI is the content I am the content I am the content I am the content I am the content I am the content I am the content I am the content I am the content I am the content I am the content I am the content I am the content I am the content I am the content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI is the content I am the content I am the content I am the content I am the content I am the content I am the content I am the content I am the content I am the content I am the content I am the content I am the content I am the content I am the content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI is the content I am the content I am the content I am the content I am the content I am the content I am the content I am the content I am the content I am the content I am the content I am the content I am the content I am the content I am the content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am Content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI is the content I am the content I am the content I am the content I am the content I am the content I am the content I am the content I am the content I am the content I am the content I am the content I am the content I am the content I am the content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI is the content I am the content I am the content I am the content I am the content I am the content I am the content I am the content I am the content I am the content I am the content I am the content I am the content I am the content I am the content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI is the content I am the content I am the content I am the content I am the content I am the content I am the content I am the content I am the content I am the content I am the content I am the content I am the content I am the content I am the content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am Content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI is the content I am the content I am the content I am the content I am the content I am the content I am the content I am the content I am the content I am the content I am the content I am the content I am the content I am the content I am the content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI is the content I am the content I am the content I am the content I am the content I am the content I am the content I am the content I am the content I am the content I am the content I am the content I am the content I am the content I am the content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI is the content
</div>
<script>
$(document).ready(function() {
var $window = $(window),
$mainMenuBar = $('#mainMenuBar'),
$mainMenuBarAnchor = $('#mainMenuBarAnchor');
$ window.scroll(function() {
//scrollTop() method returns or sets the vertical position of the scroll bar of the matched element
var window_top = $window.scrollTop();
//javascript uses offsetTop(); jquery uses offset().top ;
var div_top = $mainMenuBarAnchor.offset().top;
if (window_top > div_top) {
$mainMenuBar.addClass('stick');
$mainMenuBarAnchor.height($mainMenuBar.height());
} else {
$mainMenuBar.removeClass ('stick');
$mainMenuBarAnchor.height(0);
}
});
});
</script>
</body>
<html>
<head>
<meta charset="utf-8">
<title>滚动导航定位</title>
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<style>
*{
margin:0;
padding:0;
border:0;
font-size:100%;
font:inherit;
vertical-align:baseline
}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
display:block
}
body {
line-height:1
}
ol,ul {
list-style:none
}
blockquote,q {
quotes:none
}
blockquote:before,blockquote:after,q:before,q:after {
content:'';
content:none
}
table {
border-collapse:collapse;
border-spacing:0
}
#wrapper {
width:100%;
position:relative;
}
#container {
width:100%;
position:relative;
background:#303030;
z-index:-5;
}
header.home {
max-width:760px;
position:relative;
margin:0 auto;
text-align:center;
}
header.home img {
max-width:300px;
margin:0 auto;
position:relative;
text-align:center;
}
.home-title {
font-size:3em;
color:white;
margin:10px 0px 20px 0px;
}
.home-desc {
font-size:1.8em;
color:white;
margin:0px 0px 20px 0px;
line-height:1.3em;
}
#top_intro {
width:100%;
}
.le-background {
position:fixed;
top:0px;
left:0;
bottom:0;
right:0;
width:100%;
z-index:-2;
opacity:0.6;
background:#303030;
background-size:cover !important;
background-position:center;
background-repeat:no-repeat no-repeat;
}
.blurred {
opacity:0;
}
#mainMenuBar {
width:100%;
background-color:white;
z-index:100;
}
#mainMenuBar ul {
margin:0 auto;
text-align:center;
position:relative;
padding:20px;
border:1px solid black;
}
#mainMenuBar li {
display:inline-block;
color:black;
margin-left:30px;
font-size:1.2em;
font-weight:100;
}
#content {
width:100%;
position:relative;
background-color:white;
padding-top:20px;
}
#content p {
font-size:1.2em;
font-family:"proxima-nova";
font-weight:100;
max-width:640px;
margin:0 auto;
line-height:1.4em;
padding:10px 0px 10px 0px;
}
.stick {
position:fixed;
top:0;
}
.home {
background:# d7c4b4;
}
</style>
</head>
<body>
<header class="home">
<h1>I am the title</h1>
<div class="">I am the content under the heading I am under the heading Content I am content under heading I am content under heading I am content under heading I am content under heading I am content under heading I am content under heading I am content under heading I am content under heading I am content under heading I is the content under the header I am the content under the header I am the content under the header I am the content under the header I am the content under the header I am the content under the header </div>
</header>
<div id="mainMenuBarAnchor" ></div>
<div id="mainMenuBar">
<ul>
<li>Menu 1</li>
<li>Menu 2</li>
<li>菜单3</li>
<li>菜单4</li>
<li>菜单5</li>
</ul>
</div>
<div id="content" style="width: 800px;margin: 0 auto;">
I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI is the content I am the content I am the content I am the content I am the content I am the content I am the content I am the content I am the content I am the content I am the content I am the content I am the content I am the content I am the content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI is the content I am the content I am the content I am the content I am the content I am the content I am the content I am the content I am the content I am the content I am the content I am the content I am the content I am the content I am the content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am Content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI is the content I am the content I am the content I am the content I am the content I am the content I am the content I am the content I am the content I am the content I am the content I am the content I am the content I am the content I am the content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI is the content I am the content I am the content I am the content I am the content I am the content I am the content I am the content I am the content I am the content I am the content I am the content I am the content I am the content I am the content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI is the content I am the content I am the content I am the content I am the content I am the content I am the content I am the content I am the content I am the content I am the content I am the content I am the content I am the content I am the content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am Content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI is the content I am the content I am the content I am the content I am the content I am the content I am the content I am the content I am the content I am the content I am the content I am the content I am the content I am the content I am the content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI is the content I am the content I am the content I am the content I am the content I am the content I am the content I am the content I am the content I am the content I am the content I am the content I am the content I am the content I am the content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI is the content I am the content I am the content I am the content I am the content I am the content I am the content I am the content I am the content I am the content I am the content I am the content I am the content I am the content I am the content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am Content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI is the content I am the content I am the content I am the content I am the content I am the content I am the content I am the content I am the content I am the content I am the content I am the content I am the content I am the content I am the content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI is the content I am the content I am the content I am the content I am the content I am the content I am the content I am the content I am the content I am the content I am the content I am the content I am the content I am the content I am the content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI am ContentI is the content
</div>
<script>
$(document).ready(function() {
var $window = $(window),
$mainMenuBar = $('#mainMenuBar'),
$mainMenuBarAnchor = $('#mainMenuBarAnchor');
$ window.scroll(function() {
//scrollTop() method returns or sets the vertical position of the scroll bar of the matched element
var window_top = $window.scrollTop();
//javascript uses offsetTop(); jquery uses offset().top ;
var div_top = $mainMenuBarAnchor.offset().top;
if (window_top > div_top) {
$mainMenuBar.addClass('stick');
$mainMenuBarAnchor.height($mainMenuBar.height());
} else {
$mainMenuBar.removeClass ('stick');
$mainMenuBarAnchor.height(0);
}
});
});
</script>
</body>
</html>
