js滚动导航定位--头部demo效果示例(整理)
<!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>我是标题</h1>
<div class="">我是标题下的内容我是标题下的内容我是标题下的内容我是标题下的内容我是标题下的内容我是标题下的内容我是标题下的内容我是标题下的内容我是标题下的内容我是标题下的内容我是标题下的内容我是标题下的内容我是标题下的内容我是标题下的内容我是标题下的内容我是标题下的内容</div>
</header>
<div id="mainMenuBarAnchor"></div>
<div id="mainMenuBar">
<ul>
<li>菜单1</li>
<li>菜单2</li>
<li>菜单3</li>
<li>菜单4</li>
<li>菜单5</li>
</ul>
</div>
<div id="content" style="width: 800px;margin: 0 auto;">
我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容
</div>
<script>
$(document).ready(function() {
var $window = $(window),
$mainMenuBar = $('#mainMenuBar'),
$mainMenuBarAnchor = $('#mainMenuBarAnchor');
$window.scroll(function() {
//scrollTop()方法返回或设置匹配元素的滚动条的垂直位置
var window_top = $window.scrollTop();
//javascript用offsetTop();jquery用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>
相关文章
- html如何只刷新页面指定,js控制页面刷新 JS刷新当前页面的几种方法总结
- js 事件循环中宏任务和微任务执行顺序
- js正则使用变量_JavaScript正则
- JS设置定时器_js设置定时器
- JS动态设置对象的属性名
- clipboard.js:最轻便的复制页面内容到剪切板的JS
- 页面跳转进度条JS实现详解编程语言
- Js Math详解编程语言
- JS display和visibility属性:显示和隐藏元素
- nodejs使用Node.js优雅地整合MongoDB(mongodb整合)
- 使用JS在网页中连接Oracle数据库(js网页链接oracle)
- JS在Oracle中的应用(js如何oracle)
- 从前端JS里请求Redis资源,搭建高性能应用(前端js请求redis)
- 一个非常不错的一个正则练习JS版
- js设置css的定位
- JS旋转的彩色文字轮转特效
- 浅说js变量
- JS打开层/关闭层/移动层动画效果的实例代码
- js为鼠标添加右击事件防止默认的右击菜单弹出
- javascript教程之不完整的继承(js原型链)
- JS弹出层单纯的绝对定位居中示例代码
- js中通过父级进行查找定位元素
- node.js中的fs.appendFile方法使用说明