滚动固定TAB在顶部显示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link rel="stylesheet" href="http://pcss1.4008000000.com/app_css/4008000000/v20/base.css"/>
<link rel="stylesheet" href="http://pcss1.4008000000.com/app_css/4008000000/v20/public.css"/>
<link rel="stylesheet" href="http://pcss1.4008000000.com/app_css/4008000000/v10/zaixiangoumai/baoxian/lvyoubaoxian_bbm.css"/> <script type="text/javascript" src="http://pscript1.4008000000.com/app_js/paui/1.0.1/build/pa.ui.min.js"></script> </head>
<body>
<div style="height:500px;"></div> <div class="page_Tab_title" id="page_Tab_title" style="margin-top: 0px; position: absolute;">
<div class="page_Tab">
<ul class="page_Tab_nav c">
<li class="cut">保障说明</li>
<li>常见问题</li>
<li>特别申明</li>
<li>客户评价</li>
</ul>
<!-- 分享 -->
<div class="fenxiang">
<span>该产品分享至：</span>
<a class="jiathis_button_weixin weixin" title="微信" otitle="微信-TAB选卡" otype="button" id="T-weixin"><span class="jiathis_txt jiathis_separator jtico jtico_weixin">微信</span></a>
<a class="jiathis_button_tsina sina" title="新浪微博" otitle="新浪微博-TAB选卡" otype="button" id="T-sina"><span class="jiathis_txt jiathis_separator jtico jtico_tsina">新浪微博</span></a>
<!--<a class="text" href="javascript:;" title="加入收藏" otitle="加入收藏" otype="button"></a>
<a class="favorite" href="javascript:;" title="加入收藏" otitle="加入收藏" otype="button" onclick="AddFavorite(window.location,document.title)">加入收藏</a>
<span class="count"></span>-->
</div>
<!-- 分享 END -->
</div>
<!-- 价格 -->
<div class="pro-name">
<div class="fr pro-price">
<a href="http://www.pingan.com/pa18shopnst/productCenterNew/apply.shtml?productCode=PAY370" class="dib proPrice_btn" title="立即购买" otitle="吃货旅游保险-立即购买-上" otype="entry" target="_blank" onclick="hrefChangeByMediaSource(this);" id="T-ljgm-chihuo">立即购买</a>
</div>
<div class="fl pro-title">
<h2>【吃货旅游保险】<span>保费：<strong>20元</strong>人</span><span>保险期限：3天</span><span>适用人群：-70周岁</span></h2>
</div>
</div>
<!-- 价格 END -->
</div>
<div class="page-width">
<!-- 保障说明 -->
<div class="bz-table" id="page_Tab_cell0">
<div style="height:500px;"></div>
</div>
<!-- 保障说明 END-->
<!-- 保障疑问 --> <!-- 保障疑问 END-->
<!--常见问题-->
<div class="page_tab_cont" id="page_Tab_cell1">
<div style="height:500px;"></div>
</div>
<!--常见问题 END-->
<!--特别声明-->
<div class="page_tab_cont" id="page_Tab_cell2"> <div style="height:500px;"></div>
</div>
<!--特别声明 END-->
<!--客户评价--> <div class="page_tab_cont mt20" id="page_Tab_cell3">
<div style="height:500px;"></div>
</div>
<!--客户评价 END--> </div>
<div style="height:2000px;"></div>
<script>
//随移固定 1.作用id 2.起始高度 3.结束高度 4.上边距or下边距 5.垂直边距
function scr_fixed(id, startH, finishH, vertical_type, mar) {
var obj = document.getElementById(id),
llq, inNun = false, inNun2 = false, inNun3 = false;
if(document.all) {
var browser = navigator.appName,
b_version = navigator.appVersion,
version = b_version.split(";"),
trim_Version = version[].replace(/[ ]/g, "");
if (browser == "Microsoft Internet Explorer" && trim_Version == "MSIE6.0") {
llq = "ie6";
} else {
llq = "ie";
}
} else {
llq = "noie";
}
if (vertical_type == "b") {
startH -= document.documentElement.clientHeight;
}
function scrollFunc(){
var allH = document.body.scrollHeight - finishH,
scroH = document.documentElement.scrollTop + document.body.scrollTop;
if (vertical_type == "b") {
allH -= document.documentElement.clientHeight;
}
//右侧移动
if (scroH >= startH && scroH < allH) {
if (llq == "ie6") {
if (vertical_type == "t") {
obj.style.cssText = "margin-top:" + mar + "px; position:absolute; top:" + scroH + "px";
} else if (vertical_type == "b") {
obj.style.cssText = "margin-bottom:" + mar + "px; position:absolute; top:" + scroH + "px";
}
} else {
if (!inNun) {
if (vertical_type == "t") {
obj.style.cssText = "margin-top:" + mar + "px; top:0; position:fixed;";
} else if (vertical_type == "b") {
obj.style.cssText = "margin-bottom:" + mar + "px; top:auto; bottom:0; position:fixed;";
}
inNun = true;
} else return false;
}
inNun2 = false;
inNun3 = false;
} else if (scroH >= allH) {
if (!inNun3) {
if (vertical_type == "t") {
obj.style.cssText = "margin-top:0; position:absolute; top:" + allH + "px";
} else if (vertical_type == "b") {
obj.style.cssText = "margin-bottom:0; position:absolute; top:auto; bottom:" + -allH + "px";
}
inNun3 = true;
} else return false;
inNun = false;
} else {
inNun = false;
if (llq == "ie6") {
if (vertical_type == "t") {
obj.style.cssText = "margin-top:0; position:absolute;";
} else if (vertical_type == "b") {
obj.style.cssText = "margin-bottom:0; position:absolute;";
}
} else {
if (!inNun2) {
if (vertical_type == "t") {
obj.style.cssText = "margin-top:0; position:absolute;";
} else if (vertical_type == "b") {
obj.style.cssText = "margin-bottom:0; position:absolute;";
}
inNun2 = true;
} else return false;
}
}
}
if(window.addEventListener){
window.addEventListener('scroll', scrollFunc);
} else {
window.attachEvent('onscroll', scrollFunc);
}
if(document.documentElement.scrollTop + document.body.scrollTop == ){
scrollFunc();
}
}
// 滚动导航分块
function orderScroll(opt){
this.options = {
menu: "", //要固定的顶部导航栏的ID
type: 'scroll', //类型, scroll:滚动 tab:tab切换
tab_hide: true, //若选择tab方式,true为默认隐藏非当前分块,false为默认不隐藏非当前分块
vertical: 't', //附着在顶部或者底部 "t" or "b"
cell: "", //分块,选择器ID前缀,后加数字确定次序——分块类型请用一种
cell_class: "", //分块,由相同class组成,按次序排——分块类型请用一种
cut_class: "cut", //选中样式名
btn: "", //导航栏中控制显隐的按钮选择器
cell_t: , //分块距离顶部高度——单数字视为每个分块距离顶部高度一样,也可设置为数组定义不同的高度
start_h: undefined, //开始高度
end_h: , //结束高度
animate: //滚动速度
};
for(var i in opt){
if(opt[i] != undefined){
this.options[i] = opt[i];
}
} this._start = function(){
var self = this,
opt = self.options,
menu = opt.menu,
$menu = $('#' + menu),
$menuH = $menu.outerHeight(),
start_h = opt.start_h || $menu.offset().top,
cell = "#" + opt.cell,
cell_class = '.' + opt.cell_class,
cell_t = opt.cell_t,
vertical = opt.vertical,
$btn = $(opt.btn),
length = $menu.find('li').length,
cellH = new Array(length),
obj = new Array(length),
n, i, contain, nowH; if(vertical == 'b'){
start_h += $menuH;
} //随移固定 1.作用id 2.起始高度 3.结束高度 4.上边距or下边距 5.垂直边距
scr_fixed(menu,start_h,opt.end_h,vertical,); if (vertical == "b") {
start_h -= $(window).height();
opt.end_h += $(window).height();
} // 添加占位div
if($menu.next().attr('class') != (menu + "_stay") && $menu.next().height() != $menuH){
$menu.after('<div class="' + menu +'_stay" style="height:' + $menuH + 'px;"></div>');
} if(typeof cell_t == 'number'){
n = cell_t;
cell_t = new Array(length);
for(i = ; i < length; i++){
cell_t[i] = n;
}
} for(i = ; i < length; i++){
obj[i] = (cell_class == '.') ? $(cell + i) : $(cell_class).eq(i);
} function countPos(){
for(i = ; i < length; i++){
cellH[i] = obj[i].length ? obj[i].offset().top - $menuH - cell_t[i] : ;
if (vertical == "b") {
cellH[i] += $menuH;
}
}
} countPos(); //tab方式
if(opt.type == "tab"){
if(opt.tab_hide){
for(i = ; i < length; i++){
obj[i].hide();
}
obj[].show();
}
$menu.find('li').each(function(){
var $this = $(this),
index = $this.index();
$(this).click(function(){
$menu.find('li').removeClass(opt.cut_class).eq(index).addClass(opt.cut_class);
$('html,body').stop().animate({scrollTop:cellH[] + }, opt.animate);
obj[index].show().siblings().hide();
})
})
} function judge_statu(){
countPos();
nowH = $(this).scrollTop();
for(i = ; i < length; i++){
contain = i == length- ? : cellH[i + ];
if(nowH > cellH[i] && nowH < contain){
$menu.find('li').removeClass(opt.cut_class).eq(i).addClass(opt.cut_class);
break;
}
}
}
$(window).scroll(function(){
if($(this).scrollTop() >= start_h && $(this).scrollTop() <= document.body.scrollHeight - opt.end_h){
if(opt.type == "scroll"){
judge_statu();
}
$btn.show();
}else{
$btn.hide();
}
})
if(opt.type == "scroll"){
judge_statu();
$menu.find('li').each(function(){
var $this = $(this),
index = $this.index();
$(this).click(function(){
$('html,body').stop().animate({scrollTop:cellH[index] + }, opt.animate);
})
})
}
} this._start();
}
orderScroll.prototype = { }
// 随屏滚动固定菜单并导航分块 0811
var scroll_order = new orderScroll({
menu: "page_Tab_title", //要固定的顶部导航栏的ID
cell: "page_Tab_cell", //分块的选择器ID前缀
btn: "#page_Tab_buy", //导航栏中控制显隐的按钮选择器
cell_t: //滚动到时分块距离顶部的距离
}); </script>
<script type="text/javascript" src="http://v2.jiathis.com/code/jia.js" charset="utf-8"></script> </body>
</html>
滚动固定TAB在顶部显示的更多相关文章
- jQuery 顶部导航尾随滚动，固定浮动在顶部
jQuery 顶部导航尾随滚动.固定浮动在顶部 演示 XML/HTML Code <section> <article class="left"> < ...
- 左侧 随着页面滚动固定 fixed. scroll .scrollTop
1.图片. 要求:随着页面滚动 . 左侧应该顶着 浏览器顶部, 向上回滚, 就恢复原状. 2. 代码: html <div class="all "> <!-- ...
- 元素滚动到底部或顶部时阻止body滚动
移动端的弹窗内容有滚动条,滚动到底部或顶部时或影响弹窗下的body滚动,某些浏览器滚动到顶部时不松手就触发了刷新页面的情况,如果不需要这样的默认体验,就需要加一下判断了. var startX,sta ...
- Delphi for iOS开发指南(8):在iOS应用程序中使用Tab组件来显示分页
Delphi for iOS开发指南(8):在iOS应用程序中使用Tab组件来显示分页 在FireMonkey iOS应用程序中的Tab Tab由FMX.TabControl.TTabControl定 ...
- scrollfix.js插件：滚动固定在某个位置
插件文件在/文件 scrollfix.js 用法: var fix = $(".fix"), fixtop = $(".fix-top"), fixStartT ...
- html/css 滚动到元素位置，显示加载动画
每次滚动到元素时,都显示加载动画,如何添加? 元素添加初始参数 以上图中的动画为例,添加俩个左右容器,将内容放置在容器内部. 添加初始数据,默认透明度0.左右分别移动100px. //左侧容器 .it ...
- 可轮播滚动的Tab选项卡
前段时间有试着搭建个后台主题ui框架,有用到可支持滚动的Tab选项卡,模仿着H+后台主题ui框架中的代码造轮子改造了下,可惜代码在公司,不能把代码外发出来(感觉这样被限制了很多,对于这样的公司没办法, ...
- easyUI tab页的显示与隐藏
每天学习一点点 编程PDF电子书免费下载: http://www.shitanlife.com/code 隐藏:tab_option = $('#tabid').tabs('getTab'," ...
- IDEA中设置Tab多行显示、打开过多自动关闭的方法
IDEA中默认Tab是单行显示的,而且默认允许同时打开10个Tab,继续打开Tab会根据规则关闭之前打开的Tab.但是可以通过设置来符合自己的使用习惯. 一.打开Tab过多自动关闭 1.选择File→ ...
随机推荐
- ZJOI2016二试+游记
...excited.... 一场打回原形爽哦. T1莫名爆到了10分,T2T3均没交,一个小时过后就没再拿任何分数,perfectly狗带了... 总之没有给自己充足的时间去敲暴力,ZJOI啊..拿 ...
- PHP如何实现文件上传
PHP如何实现文件上传 1.表单部分 允许用户上传文件,在HTML表单的声明中要加上一个上传的属性: enctype = 'multipart/form-data' 表单的method必须是PO ...
- web api :Routing in ASP.NET Web API
引 Web API 和SignalR都是在服务层. If you are familiar with ASP.NET MVC, Web API routing is very similar to M ...
- 解决(空密码的root)提示修改phpmyadmin用户密码
打开 phpmyadmin数据表,点击权限 如果没有,请参考:http://jingyan.baidu.com/article/636f38bb293a9bd6b846100d.html 创建 在 ...
- bzoj1005 [HNOI2008]明明的烦恼
1005: [HNOI2008]明明的烦恼 Time Limit: 1 Sec Memory Limit: 162 MBSubmit: 3032 Solved: 1209 Description ...
- ACM: 还是畅通工程-并查集-最小生成树-解题报
还是畅通工程 Time Limit:2000MS Memory Limit:32768KB 64bit IO Format:%I64d & %I64u Description 某省调查乡村交通 ...
- 转：45 个 LoadRunner 面试问题(附答案)_纯英文，太有逼格了
What is load testing? - Load testing is to test that if the application works fine with the loads th ...
- 【BZOJ】1225: [HNOI2001] 求正整数
http://www.lydsy.com/JudgeOnline/problem.php?id=1225 题意:给一个数n,求一个最小的有n个约数的正整数.(n<=50000) #include ...
- php by oneself
在php里面写html代码真的很麻烦,最近学到了一个新的方法: <html> <head> <title>PHP</title> <meta ht ...
- jquery插件之表格隔行变色并鼠标滑过高亮显示
该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现表格隔行变色,且鼠标移动在表格的某一行上时,该行能高亮显示.整体代码如 ...