单个导航固定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>stickup</title>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
<style>
#header {
background-color: red;
height: 80px;
line-height: 80px;
text-align: center;
}
#nav {
margin-top: 20px;
height: 40px;
background: blue;
}
#content {
min-height: 800px;
background: #ccc;
padding: 10px;
/*形成独立的块级格式化上下文，内部布局仅在内部产生影响*/
overflow: hidden;
}
#content .aside {
float: left;
width: 100px;
min-height: 400px;
background:green;
}
#content .main {
background: #fff;
padding-left: 20px;
min-height: 800px;
/*形成独立的块级格式化上下文，内部布局仅在内部产生影响*/
overflow: hidden;
}
#footer {
background: #333;
}
</style>
</head>
<body>
<div id="header">header</div>
<div id="nav">nav</div>
<div id="content">
<div class="aside">aside</div>
<div class="main">main</div>
</div>
<div id="footer">footer</div>
<script>
var nav = $('#nav'),
navH = nav.height(),
navW = nav.width();
//.offset()方法允许我们检索一个元素相对于文档（document）的当前位置。
offsetTop = nav.offset().top,
offsetLeft = nav.offset().left;
//把目标元素克隆一个用于占位，否则目标元素Position变为fix后脱离文档流，导致页面跳动
var navClone = nav.clone()
.css({visibility: 'hidden', display: 'none'})
.insertBefore(nav);
$(window).on('scroll', function(){
var scrollTop = $(this).scrollTop();
if(scrollTop >= offsetTop){
if(!isFixed()){ //如果没被固定
setFixed(); //执行固定
}
} else {
if(isFixed()){
unsetFixed();
}
}
});
//判断固定
function isFixed(){
//返回nav标签的数据存储上的data-fixed属性
return nav.data('data-fixed');
}
//设置固定
function setFixed(){
/*在nav标签的数据存储上保存属性data-fixed值true。
如<div id='nav' data-fixed='true'>；
同时设置固定时的css*/
nav.data('data-fixed', true).css({
'position': 'fixed',
'top': 0,
'left': offsetLeft,
'width': navW,
'margin': 0,
'z-index': 100
});
navClone.show(); //展示克隆的nav
}
//取消固定
function unsetFixed(){
//重点注意.removeAttr('style') 对应setFixed函数中的css样式
nav.data('data-fixed', false).removeAttr('style');
navClone.hide();
}
/*
方法核心：
1.克隆一个nav导航条，用于占位
2.将原导航条用于固定定位，固定定位时展示出用于占位的克隆导航条
3.取消固定时，隐藏用于占位的克隆导航条
*/
</script>
</body>
</html>
多个导航固定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Stickup</title>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
<style>
.wrap {
width: 900px;
margin: 0 auto;
}
#header .wrap {
height: 50px;
line-height: 50px;
background: red;
}
.nav {
height: 30px;
line-height: 30px;
border: 1px solid;
background: yellow;
}
.ct {
margin-top: 20px;
overflow: hidden;
}
.ct:after {
display: block;
content: '';
clear: both;
}
.aside {
float: left;
width: 200px;
height: 400px;
background: pink;
padding-top: 5px;
}
.aside2 {
background: yellow;
}
.aside3 {
background: red;
}
.main {
overflow: hidden;
float: right;
width: 680px;
height: 400px;
padding-top: 5px;
background: blue;
}
.footer {
background: green;
margin-top:20px;
}
</style>
</head>
<body>
<div id="header">
<div class="wrap">header</div>
</div>
<div id="content">
<div class="wrap">
<div class="ct">
<div class="nav">nav1</div>
<div class="aside aside1">aside1</div>
<div class="main">main1</div>
</div>
<div class="ct">
<div class="nav">nav2</div>
<div class="aside aside2">aside2</div>
<div class="main">main2</div>
</div>
<div class="ct">
<div class="nav">nav3</div>
<div class="aside aside3">aside3</div>
<div class="main">main3</div>
</div>
<div class="ct">
<div class="nav">nav4</div>
<div class="aside aside4">aside4</div>
<div class="main">main4</div>
</div>
</div>
</div>
<div class="footer wrap">footer</div>
<script>
/*
对上例stickup-jquery.html 做个 each 遍历循环即可实现对多个 nav 应用 stickup 效果
代码只是实现功能，但比较丑陋，初学者可以模仿。
可以使用 stick-plugin.html 里面的插件来实现效果
*/
$('.nav').each(function(){ //显式遍历class为nav的html元素
var $cur = $(this),
curH = $cur.height(),
curW = $cur.width(),
offsetTop = $cur.offset().top,
offsetLeft = $cur.offset().left;
var $curClone = $cur.clone()
.css({visibility:'hidden', display: 'none'})
.insertBefore($cur);
$(window).on('scroll', function(){
var scrollTop = $(this).scrollTop();
if(scrollTop >= offsetTop){
if(!isFixed()){
setFixed();
}
} else {
if(isFixed()){
unsetFixed();
}
}
});
function isFixed(){
return $cur.data('data-fixed'); //返回$cur上数据存储的值：true or false
}
function setFixed(){
$cur.data('data-fixed', true)
.css({
'position': 'fixed',
'top': 0,
'left': offsetLeft,
'width': curW,
'margin': 0,
'z-index': 1000
});
$curClone.show();
}
function unsetFixed(){
$cur.data('data-fixed', false)
.removeAttr('style');
$curClone.hide();
}
});
</script>
</body>
</html>
网友评论