吸顶导航
来源：互联网 发布：淘宝刷到皇冠要多少钱 编辑：程序博客网 时间：2024/05/17 06:52
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>导航菜单固定头部跟随屏幕滚动jQuery插件</title>
<script type="text/javascript" src="http://www.juheweb.com/demo/js/jquery.min.js"></script>
<script src="posfixed.js"></script>
<script>
$(function() {
$('.nav').posfixed({
distance: 0,
pos: 'top',
type: 'while',
hide: false
});
});
</script>
</head>
<body style="height:2000px;">
<div class="wrap">
<div class="box fl"></div>
<ul class="nav fr">
<li>
<a href="#a1">说 明</a>
</li>
<li>
<a href="#a2">使 用</a>
</li>
<li>
<a href="#a3">参 数</a>
</li>
<li>
<a href="#a4">兼 容</a>
</li>
</ul>
</div>
<style type="text/css">
body {
margin: 10px;
}
.fr {
float: right;
}
.fl {
float: left;
}
.box {
width: 200px;
height: 400px;
border: 1px solid red;
}
.wrap {
width: 1200px;
margin: 0 auto;
font-size: 14px;
line-height: 30px;
border: 1px solid blue;
overflow: hidden;
}
h1 {
margin: 40px 0;
font: 32px Microsoft Yahei;
text-align: center;
}
h2 {
height: 30px;
margin: 20px 0 10px;
padding: 0 5px;
font: 16px/30px Microsoft Yahei;
background-color: #f0f0f0;
}
h3 {
font-size: 14px;
}
.nav {
width: 980px;
height: 36px;
margin: 0;
padding: 0;
list-style-type: none;
background-color: #0099CC;
}
.nav li {
float: left;
border-right: 1px solid #00a7df;
}
.nav a {
float: left;
height: 36px;
padding: 0 30px;
line-height: 36px;
color: #fff;
text-decoration: none;
}
.highlight {
color: #f50;
}
pre {
padding: 10px;
border: 1px solid #ededed;
line-height: 20px;
font-size: 12px;
background-color: #f9f9f9;
}
table {
width: 100%;
border-spacing: 0;
border-collapse: collapse;
}
table th,
table td {
padding: 0 10px;
border: 1px solid #ddd;
}
.list {
list-style-type: square;
}
.list a {
color: #2864BE;
}
.gotop {
font-size: 12px;
padding: 5px;
line-height: 14px;
color: #fff;
background-color: #0099CC;
text-decoration: none;
}
.vad {
margin: 30px 0 5px;
font-family: arial, 宋体, sans-serif;
text-align: center;
}
.vad a {
display: inline-block;
height: 30px;
line-height: 30px;
margin: 0 5px;
padding: 0 20px;
font-size: 14px;
text-align: center;
color: #eee;
text-decoration: none;
background-color: #222;
}
.vad a:hover {
color: #fff;
background-color: #000;
}
</style>
<script>
(function($) {
$.extend($.fn, {
posfixed: function(configSettings) {
var settings = {
direction: "top",
type: "while",
hide: false,
distance: 0
};
$.extend(settings, configSettings);
//initial
if($.browser.msie && $.browser.version == 6.0) {
$("html").css("overflow", "hidden");
$("body").css({
height: "100%",
overflow: "auto"
});
}
var obj = this;
var initPos = $(obj).offset().top;
var initPosLeft = $(obj).offset().left;
var anchoredPos = settings.distance;
if(settings.type == "while") {
if($.browser.msie && $.browser.version == 6.0) {
$("body").scroll(function(event) {
var objTop = $(obj).offset().top - $("body").scrollTop();
if(objTop <= settings.distance) {
$(obj).css("position", "absolute");
$(obj).css("top", settings.distance + "px");
$(obj).css("left", initPosLeft + "px");
}
if($(obj).offset().top <= initPos) {
$(obj).css("position", "static");
}
});
} else {
$(window).scroll(function(event) {
if(settings.direction == "top") {
var objTop = $(obj).offset().top - $(window).scrollTop();
if(objTop <= settings.distance) {
$(obj).css("position", "fixed");
$(obj).css(settings.direction, settings.distance + "px");
}
if($(obj).offset().top <= initPos) {
$(obj).css("position", "static");
}
} else {
var objBottom = $(window).height() - $(obj).offset().top + $(window).scrollTop() - $(obj).outerHeight();
if(objBottom <= settings.distance) {
$(obj).css("position", "fixed");
$(obj).css(settings.direction, settings.distance + "px");
}
if($(obj).offset().top >= initPos) {
$(obj).css("position", "static");
}
}
});
}
}
if(settings.type == "always") {
if($.browser.msie && $.browser.version == 6.0) {
if(settings.hide) {
$(obj).hide();
}
$("body").scroll(function(event) {
if($("body").scrollTop() > 300) {
$(obj).fadeIn(200);
} else {
$(obj).fadeOut(200);
}
});
$(obj).css("position", "absolute");
$(obj).css(settings.direction, settings.distance + "px");
if(settings.tag != null) {
if(settings.tag.obj != null) {
if(settings.tag.direction == "right") {
$(obj).css("left", (settings.tag.obj.offset().left + settings.tag.obj.width() + settings.tag.distance) + "px");
$(window).resize(function() {
$(obj).css("left", (settings.obj.tag.offset().left + settings.tag.obj.width() + settings.tag.distance) + "px");
});
} else {
console.log(settings.tag.obj.offset().left - settings.tag.obj.width() - settings.tag.distance);
$(obj).css("left", (settings.tag.obj.offset().left - $(obj).outerWidth() - settings.tag.distance) + "px");
$(window).resize(function() {
$(obj).css("left", (settings.tag.obj.offset().left - $(obj).outerWidth() - settings.tag.distance) + "px");
});
}
} else {
$(obj).css(settings.tag.direction, settings.tag.distance + "px");
}
}
} else {
if(settings.hide) {
$(obj).hide();
}
$(window).scroll(function(event) {
if($(window).scrollTop() > 300) {
$(obj).fadeIn(200);
} else {
$(obj).fadeOut(200);
}
});
var objLeft = $(obj).offset().left;
$(obj).css("position", "fixed");
$(obj).css(settings.direction, settings.distance + "px");
if(settings.tag != null) {
if(settings.tag.obj != null) {
if(settings.tag.direction == "right") {
$(obj).css("left", (settings.tag.obj.offset().left + settings.tag.obj.width() + settings.tag.distance) + "px");
$(window).resize(function() {
$(obj).css("left", (settings.obj.tag.offset().left + settings.tag.obj.width() + settings.tag.distance) + "px");
});
} else {
console.log(settings.tag.obj.offset().left - settings.tag.obj.width() - settings.tag.distance);
$(obj).css("left", (settings.tag.obj.offset().left - $(obj).outerWidth() - settings.tag.distance) + "px");
$(window).resize(function() {
$(obj).css("left", (settings.tag.obj.offset().left - $(obj).outerWidth() - settings.tag.distance) + "px");
});
}
} else {
$(obj).css(settings.tag.direction, settings.tag.distance + "px");
}
}
}
}
}
});
})(jQuery);
</script>
</body>
</html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>导航菜单固定头部跟随屏幕滚动jQuery插件</title>
<script type="text/javascript" src="http://www.juheweb.com/demo/js/jquery.min.js"></script>
<script src="posfixed.js"></script>
<script>
$(function() {
$('.nav').posfixed({
distance: 0,
pos: 'top',
type: 'while',
hide: false
});
});
</script>
</head>
<body style="height:2000px;">
<div class="wrap">
<div class="box fl"></div>
<ul class="nav fr">
<li>
<a href="#a1">说 明</a>
</li>
<li>
<a href="#a2">使 用</a>
</li>
<li>
<a href="#a3">参 数</a>
</li>
<li>
<a href="#a4">兼 容</a>
</li>
</ul>
</div>
<style type="text/css">
body {
margin: 10px;
}
.fr {
float: right;
}
.fl {
float: left;
}
.box {
width: 200px;
height: 400px;
border: 1px solid red;
}
.wrap {
width: 1200px;
margin: 0 auto;
font-size: 14px;
line-height: 30px;
border: 1px solid blue;
overflow: hidden;
}
h1 {
margin: 40px 0;
font: 32px Microsoft Yahei;
text-align: center;
}
h2 {
height: 30px;
margin: 20px 0 10px;
padding: 0 5px;
font: 16px/30px Microsoft Yahei;
background-color: #f0f0f0;
}
h3 {
font-size: 14px;
}
.nav {
width: 980px;
height: 36px;
margin: 0;
padding: 0;
list-style-type: none;
background-color: #0099CC;
}
.nav li {
float: left;
border-right: 1px solid #00a7df;
}
.nav a {
float: left;
height: 36px;
padding: 0 30px;
line-height: 36px;
color: #fff;
text-decoration: none;
}
.highlight {
color: #f50;
}
pre {
padding: 10px;
border: 1px solid #ededed;
line-height: 20px;
font-size: 12px;
background-color: #f9f9f9;
}
table {
width: 100%;
border-spacing: 0;
border-collapse: collapse;
}
table th,
table td {
padding: 0 10px;
border: 1px solid #ddd;
}
.list {
list-style-type: square;
}
.list a {
color: #2864BE;
}
.gotop {
font-size: 12px;
padding: 5px;
line-height: 14px;
color: #fff;
background-color: #0099CC;
text-decoration: none;
}
.vad {
margin: 30px 0 5px;
font-family: arial, 宋体, sans-serif;
text-align: center;
}
.vad a {
display: inline-block;
height: 30px;
line-height: 30px;
margin: 0 5px;
padding: 0 20px;
font-size: 14px;
text-align: center;
color: #eee;
text-decoration: none;
background-color: #222;
}
.vad a:hover {
color: #fff;
background-color: #000;
}
</style>
<script>
(function($) {
$.extend($.fn, {
posfixed: function(configSettings) {
var settings = {
direction: "top",
type: "while",
hide: false,
distance: 0
};
$.extend(settings, configSettings);
//initial
if($.browser.msie && $.browser.version == 6.0) {
$("html").css("overflow", "hidden");
$("body").css({
height: "100%",
overflow: "auto"
});
}
var obj = this;
var initPos = $(obj).offset().top;
var initPosLeft = $(obj).offset().left;
var anchoredPos = settings.distance;
if(settings.type == "while") {
if($.browser.msie && $.browser.version == 6.0) {
$("body").scroll(function(event) {
var objTop = $(obj).offset().top - $("body").scrollTop();
if(objTop <= settings.distance) {
$(obj).css("position", "absolute");
$(obj).css("top", settings.distance + "px");
$(obj).css("left", initPosLeft + "px");
}
if($(obj).offset().top <= initPos) {
$(obj).css("position", "static");
}
});
} else {
$(window).scroll(function(event) {
if(settings.direction == "top") {
var objTop = $(obj).offset().top - $(window).scrollTop();
if(objTop <= settings.distance) {
$(obj).css("position", "fixed");
$(obj).css(settings.direction, settings.distance + "px");
}
if($(obj).offset().top <= initPos) {
$(obj).css("position", "static");
}
} else {
var objBottom = $(window).height() - $(obj).offset().top + $(window).scrollTop() - $(obj).outerHeight();
if(objBottom <= settings.distance) {
$(obj).css("position", "fixed");
$(obj).css(settings.direction, settings.distance + "px");
}
if($(obj).offset().top >= initPos) {
$(obj).css("position", "static");
}
}
});
}
}
if(settings.type == "always") {
if($.browser.msie && $.browser.version == 6.0) {
if(settings.hide) {
$(obj).hide();
}
$("body").scroll(function(event) {
if($("body").scrollTop() > 300) {
$(obj).fadeIn(200);
} else {
$(obj).fadeOut(200);
}
});
$(obj).css("position", "absolute");
$(obj).css(settings.direction, settings.distance + "px");
if(settings.tag != null) {
if(settings.tag.obj != null) {
if(settings.tag.direction == "right") {
$(obj).css("left", (settings.tag.obj.offset().left + settings.tag.obj.width() + settings.tag.distance) + "px");
$(window).resize(function() {
$(obj).css("left", (settings.obj.tag.offset().left + settings.tag.obj.width() + settings.tag.distance) + "px");
});
} else {
console.log(settings.tag.obj.offset().left - settings.tag.obj.width() - settings.tag.distance);
$(obj).css("left", (settings.tag.obj.offset().left - $(obj).outerWidth() - settings.tag.distance) + "px");
$(window).resize(function() {
$(obj).css("left", (settings.tag.obj.offset().left - $(obj).outerWidth() - settings.tag.distance) + "px");
});
}
} else {
$(obj).css(settings.tag.direction, settings.tag.distance + "px");
}
}
} else {
if(settings.hide) {
$(obj).hide();
}
$(window).scroll(function(event) {
if($(window).scrollTop() > 300) {
$(obj).fadeIn(200);
} else {
$(obj).fadeOut(200);
}
});
var objLeft = $(obj).offset().left;
$(obj).css("position", "fixed");
$(obj).css(settings.direction, settings.distance + "px");
if(settings.tag != null) {
if(settings.tag.obj != null) {
if(settings.tag.direction == "right") {
$(obj).css("left", (settings.tag.obj.offset().left + settings.tag.obj.width() + settings.tag.distance) + "px");
$(window).resize(function() {
$(obj).css("left", (settings.obj.tag.offset().left + settings.tag.obj.width() + settings.tag.distance) + "px");
});
} else {
console.log(settings.tag.obj.offset().left - settings.tag.obj.width() - settings.tag.distance);
$(obj).css("left", (settings.tag.obj.offset().left - $(obj).outerWidth() - settings.tag.distance) + "px");
$(window).resize(function() {
$(obj).css("left", (settings.tag.obj.offset().left - $(obj).outerWidth() - settings.tag.distance) + "px");
});
}
} else {
$(obj).css(settings.tag.direction, settings.tag.distance + "px");
}
}
}
}
}
});
})(jQuery);
</script>
</body>
</html>
0 0
- 导航吸顶效果
- 吸顶导航
- 滚动 导航栏 吸顶 固定
- 导航栏的吸顶效果
- jquery实现导航吸顶效果
- 吸顶效果,顶部高亮导航切换
- 吸顶
- JS/Jquery实现导航栏顶部吸顶效果（一）
- JS/Jquery实现导航栏顶部吸顶效果（二）
- ubuntu 左侧 顶测导航栏消失
- 滑动吸顶实现
- 吸顶菜单
- 吸顶+锚点
- 吸顶+锚点
- React Native顶-底部导航使用小技巧
- React Native顶-底部导航使用小技巧
- 顶
- 顶！！
- android5.x StateListAnimator即selector
- Web 服务编排实践
- 在树莓派上将现有系统复制到新存储卡（转载 ）
- Kafka 如何读取offset topic内容 (__consumer_offsets)
- 《第一个独立开发项目的完结》
- 吸顶导航
- UITableView中的dequeueReusableCellWithIdentifier使用
- 对象和作用域
- setSpanSizeLookup-RecyclerView 中一个合并Grid的方法
- 欢迎使用CSDN-markdown编辑器
- butterknife和对应插件android butterknife zelezny的使用详细记录
- JDE 开发-部分系统函数
- 6种内部排序算法------Java实现
- 微软MSSQL SQLSERVER mybatis insert新增后获取自动增长ID的配置
