<!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>
