1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  6. <title>Examples</title>
  7. <meta name="description" content="">
  8. <meta name="keywords" content="">
  9. <link rel="stylesheet" href="http://pcss1.4008000000.com/app_css/4008000000/v20/base.css"/>
  10. <link rel="stylesheet" href="http://pcss1.4008000000.com/app_css/4008000000/v20/public.css"/>
  11. <link rel="stylesheet" href="http://pcss1.4008000000.com/app_css/4008000000/v10/zaixiangoumai/baoxian/lvyoubaoxian_bbm.css"/>
  12.  
  13. <script type="text/javascript" src="http://pscript1.4008000000.com/app_js/paui/1.0.1/build/pa.ui.min.js"></script>
  14.  
  15. </head>
  16. <body>
  17.     <div  style="height:500px;"></div>
  18.  
  19.     <div class="page_Tab_title" id="page_Tab_title" style="margin-top: 0px; position: absolute;">
  20.         <div class="page_Tab">
  21.             <ul class="page_Tab_nav c">
  22.                 <li class="cut">保障说明</li>
  23.                 <li>常见问题</li>
  24.                 <li>特别申明</li>
  25.                 <li>客户评价</li>
  26.             </ul>
  27.             <!-- 分享 -->
  28.             <div class="fenxiang">
  29.                 <span>该产品分享至：</span>
  30.                 <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>
  31.                 <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>
  32.                 <!--<a class="text" href="javascript:;" title="加入收藏" otitle="加入收藏" otype="button"></a>
  33.                 <a class="favorite" href="javascript:;" title="加入收藏" otitle="加入收藏" otype="button" onclick="AddFavorite(window.location,document.title)">加入收藏</a>
  34.                 <span class="count"></span>-->
  35.             </div>
  36.             <!-- 分享 END -->
  37.         </div>
  38.         <!-- 价格 -->
  39.         <div class="pro-name">
  40.             <div class="fr pro-price">
  41.                 <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>
  42.             </div>
  43.             <div class="fl pro-title">
  44.                 <h2>【吃货旅游保险】<span>保费：<strong>20元</strong>人</span><span>保险期限：3天</span><span>适用人群：-70周岁</span></h2>
  45.             </div>
  46.         </div>
  47.         <!-- 价格 END -->
  48.     </div>
  49.     <div class="page-width">
  50.         <!-- 保障说明 -->
  51.         <div class="bz-table" id="page_Tab_cell0">
  52.             <div  style="height:500px;"></div>
  53.         </div>
  54.         <!-- 保障说明 END-->
  55.         <!-- 保障疑问 -->
  56.  
  57.         <!-- 保障疑问 END-->
  58.         <!--常见问题-->
  59.         <div class="page_tab_cont" id="page_Tab_cell1">
  60.             <div  style="height:500px;"></div>
  61.         </div>
  62.         <!--常见问题  END-->
  63.         <!--特别声明-->
  64.         <div class="page_tab_cont" id="page_Tab_cell2">
  65.  
  66.             <div  style="height:500px;"></div>
  67.         </div>
  68.         <!--特别声明  END-->
  69.         <!--客户评价-->
  70.  
  71.         <div class="page_tab_cont mt20" id="page_Tab_cell3">
  72.           <div  style="height:500px;"></div>
  73.         </div>
  74.         <!--客户评价  END-->
  75.  
  76.     </div>
  77.     <div  style="height:2000px;"></div>
  78. <script>
  79. //随移固定 1.作用id 2.起始高度 3.结束高度 4.上边距or下边距 5.垂直边距
  80. function scr_fixed(id, startH, finishH, vertical_type, mar) {
  81.     var obj = document.getElementById(id),
  82.         llq, inNun = false, inNun2 = false, inNun3 = false;
  83.     if(document.all) {
  84.         var browser = navigator.appName,
  85.             b_version = navigator.appVersion,
  86.             version = b_version.split(";"),
  87.             trim_Version = version[].replace(/[ ]/g, "");
  88.         if (browser == "Microsoft Internet Explorer" && trim_Version == "MSIE6.0") {
  89.             llq = "ie6";
  90.         } else {
  91.             llq = "ie";
  92.         }
  93.     } else {
  94.         llq = "noie";
  95.     }
  96.     if (vertical_type == "b") {
  97.         startH -= document.documentElement.clientHeight;
  98.     }
  99.     function scrollFunc(){
  100.         var allH = document.body.scrollHeight - finishH,
  101.             scroH = document.documentElement.scrollTop + document.body.scrollTop;
  102.         if (vertical_type == "b") {
  103.             allH -= document.documentElement.clientHeight;
  104.         }
  105.         //右侧移动
  106.         if (scroH >= startH && scroH < allH) {
  107.             if (llq == "ie6") {
  108.                 if (vertical_type == "t") {
  109.                     obj.style.cssText = "margin-top:" + mar + "px; position:absolute; top:" + scroH + "px";
  110.                 } else if (vertical_type == "b") {
  111.                     obj.style.cssText = "margin-bottom:" + mar + "px; position:absolute; top:" + scroH + "px";
  112.                 }
  113.             } else {
  114.                 if (!inNun) {
  115.                     if (vertical_type == "t") {
  116.                         obj.style.cssText = "margin-top:" + mar + "px; top:0; position:fixed;";
  117.                     } else if (vertical_type == "b") {
  118.                         obj.style.cssText = "margin-bottom:" + mar + "px; top:auto; bottom:0; position:fixed;";
  119.                     }
  120.                     inNun = true;
  121.                 } else return false;
  122.             }
  123.             inNun2 = false;
  124.             inNun3 = false;
  125.         } else if (scroH >= allH) {
  126.             if (!inNun3) {
  127.                 if (vertical_type == "t") {
  128.                     obj.style.cssText = "margin-top:0; position:absolute; top:" + allH + "px";
  129.                 } else if (vertical_type == "b") {
  130.                     obj.style.cssText = "margin-bottom:0; position:absolute; top:auto; bottom:" + -allH + "px";
  131.                 }
  132.                 inNun3 = true;
  133.             } else return false;
  134.             inNun = false;
  135.         } else {
  136.             inNun = false;
  137.             if (llq == "ie6") {
  138.                 if (vertical_type == "t") {
  139.                     obj.style.cssText = "margin-top:0; position:absolute;";
  140.                 } else if (vertical_type == "b") {
  141.                     obj.style.cssText = "margin-bottom:0; position:absolute;";
  142.                 }
  143.             } else {
  144.                 if (!inNun2) {
  145.                     if (vertical_type == "t") {
  146.                         obj.style.cssText = "margin-top:0; position:absolute;";
  147.                     } else if (vertical_type == "b") {
  148.                         obj.style.cssText = "margin-bottom:0; position:absolute;";
  149.                     }
  150.                     inNun2 = true;
  151.                 } else return false;
  152.             }
  153.         }
  154.     }
  155.     if(window.addEventListener){
  156.         window.addEventListener('scroll', scrollFunc);
  157.     } else {
  158.         window.attachEvent('onscroll', scrollFunc);
  159.     }
  160.     if(document.documentElement.scrollTop + document.body.scrollTop == ){
  161.         scrollFunc();
  162.     }
  163. }
  164. // 滚动导航分块
  165. function orderScroll(opt){
  166.     this.options = {
  167.         menu: "",               //要固定的顶部导航栏的ID
  168.         type: 'scroll',         //类型, scroll:滚动 tab:tab切换
  169.         tab_hide: true,         //若选择tab方式,true为默认隐藏非当前分块,false为默认不隐藏非当前分块
  170.         vertical: 't',          //附着在顶部或者底部   "t" or "b"
  171.         cell: "",               //分块,选择器ID前缀,后加数字确定次序——分块类型请用一种
  172.         cell_class: "",         //分块,由相同class组成,按次序排——分块类型请用一种
  173.         cut_class: "cut",       //选中样式名
  174.         btn: "",                //导航栏中控制显隐的按钮选择器
  175.         cell_t: ,             //分块距离顶部高度——单数字视为每个分块距离顶部高度一样,也可设置为数组定义不同的高度
  176.         start_h: undefined,     //开始高度
  177.         end_h: ,             //结束高度
  178.         animate:             //滚动速度
  179.     };
  180.     for(var i in opt){
  181.         if(opt[i] != undefined){
  182.             this.options[i] = opt[i];
  183.         }
  184.     }
  185.  
  186.     this._start = function(){
  187.         var self = this,
  188.             opt = self.options,
  189.             menu = opt.menu,
  190.             $menu = $('#' + menu),
  191.             $menuH = $menu.outerHeight(),
  192.             start_h = opt.start_h || $menu.offset().top,
  193.             cell = "#" + opt.cell,
  194.             cell_class = '.' + opt.cell_class,
  195.             cell_t = opt.cell_t,
  196.             vertical = opt.vertical,
  197.             $btn = $(opt.btn),
  198.             length = $menu.find('li').length,
  199.             cellH = new Array(length),
  200.             obj = new Array(length),
  201.             n, i, contain, nowH;
  202.  
  203.         if(vertical == 'b'){
  204.             start_h += $menuH;
  205.         }
  206.  
  207.         //随移固定 1.作用id 2.起始高度 3.结束高度 4.上边距or下边距 5.垂直边距
  208.         scr_fixed(menu,start_h,opt.end_h,vertical,);
  209.  
  210.         if (vertical == "b") {
  211.             start_h -= $(window).height();
  212.             opt.end_h += $(window).height();
  213.         }
  214.  
  215.         // 添加占位div
  216.         if($menu.next().attr('class') != (menu + "_stay") && $menu.next().height() != $menuH){
  217.             $menu.after('<div class="' + menu +'_stay" style="height:' + $menuH + 'px;"></div>');
  218.         }
  219.  
  220.         if(typeof cell_t == 'number'){
  221.             n = cell_t;
  222.             cell_t = new Array(length);
  223.             for(i = ; i < length; i++){
  224.                 cell_t[i] = n;
  225.             }
  226.         }
  227.  
  228.         for(i = ; i < length; i++){
  229.             obj[i] = (cell_class == '.') ? $(cell + i) : $(cell_class).eq(i);
  230.         }
  231.  
  232.         function countPos(){
  233.             for(i = ; i < length; i++){
  234.                 cellH[i] = obj[i].length ? obj[i].offset().top - $menuH - cell_t[i] : ;
  235.                 if (vertical == "b") {
  236.                     cellH[i] += $menuH;
  237.                 }
  238.             }
  239.         }
  240.  
  241.         countPos();
  242.  
  243.         //tab方式
  244.         if(opt.type == "tab"){
  245.             if(opt.tab_hide){
  246.                 for(i = ; i < length; i++){
  247.                     obj[i].hide();
  248.                 }
  249.                 obj[].show();
  250.             }
  251.             $menu.find('li').each(function(){
  252.                 var $this = $(this),
  253.                     index = $this.index();
  254.                 $(this).click(function(){
  255.                     $menu.find('li').removeClass(opt.cut_class).eq(index).addClass(opt.cut_class);
  256.                     $('html,body').stop().animate({scrollTop:cellH[] + }, opt.animate);
  257.                     obj[index].show().siblings().hide();
  258.                 })
  259.             })
  260.         }
  261.  
  262.         function judge_statu(){
  263.             countPos();
  264.             nowH = $(this).scrollTop();
  265.             for(i = ; i < length; i++){
  266.                 contain = i == length- ?  : cellH[i + ];
  267.                 if(nowH > cellH[i] && nowH < contain){
  268.                     $menu.find('li').removeClass(opt.cut_class).eq(i).addClass(opt.cut_class);
  269.                     break;
  270.                 }
  271.             }
  272.         }
  273.         $(window).scroll(function(){
  274.             if($(this).scrollTop() >= start_h && $(this).scrollTop() <= document.body.scrollHeight - opt.end_h){
  275.                 if(opt.type == "scroll"){
  276.                     judge_statu();
  277.                 }
  278.                 $btn.show();
  279.             }else{
  280.                 $btn.hide();
  281.             }
  282.         })
  283.         if(opt.type == "scroll"){
  284.             judge_statu();
  285.             $menu.find('li').each(function(){
  286.                 var $this = $(this),
  287.                     index = $this.index();
  288.                 $(this).click(function(){
  289.                     $('html,body').stop().animate({scrollTop:cellH[index] + }, opt.animate);
  290.                 })
  291.             })
  292.         }
  293.     }
  294.  
  295.     this._start();
  296. }
  297. orderScroll.prototype = {
  298.  
  299. }
  300. // 随屏滚动固定菜单并导航分块  0811
  301. var scroll_order = new orderScroll({
  302.     menu: "page_Tab_title",        //要固定的顶部导航栏的ID
  303.     cell: "page_Tab_cell",        //分块的选择器ID前缀
  304.     btn: "#page_Tab_buy",        //导航栏中控制显隐的按钮选择器
  305.     cell_t:                      //滚动到时分块距离顶部的距离
  306. });
  307.  
  308. </script>
  309. <script type="text/javascript" src="http://v2.jiathis.com/code/jia.js" charset="utf-8"></script>
  310.  
  311. </body>
  312. </html>

滚动固定TAB在顶部显示的更多相关文章

  1. jQuery 顶部导航尾随滚动，固定浮动在顶部

    jQuery 顶部导航尾随滚动.固定浮动在顶部 演示 XML/HTML Code <section> <article class="left"> < ...

  2. 左侧 随着页面滚动固定 fixed. scroll .scrollTop

    1.图片. 要求:随着页面滚动 . 左侧应该顶着 浏览器顶部, 向上回滚, 就恢复原状. 2. 代码: html <div class="all "> <!-- ...

  3. 元素滚动到底部或顶部时阻止body滚动

    移动端的弹窗内容有滚动条,滚动到底部或顶部时或影响弹窗下的body滚动,某些浏览器滚动到顶部时不松手就触发了刷新页面的情况,如果不需要这样的默认体验,就需要加一下判断了. var startX,sta ...

  4. Delphi for iOS开发指南(8):在iOS应用程序中使用Tab组件来显示分页

    Delphi for iOS开发指南(8):在iOS应用程序中使用Tab组件来显示分页 在FireMonkey iOS应用程序中的Tab Tab由FMX.TabControl.TTabControl定 ...

  5. scrollfix.js插件：滚动固定在某个位置

    插件文件在/文件 scrollfix.js 用法: var fix = $(".fix"), fixtop = $(".fix-top"), fixStartT ...

  6. html/css 滚动到元素位置，显示加载动画

    每次滚动到元素时,都显示加载动画,如何添加? 元素添加初始参数 以上图中的动画为例,添加俩个左右容器,将内容放置在容器内部. 添加初始数据,默认透明度0.左右分别移动100px. //左侧容器 .it ...

  7. 可轮播滚动的Tab选项卡

    前段时间有试着搭建个后台主题ui框架,有用到可支持滚动的Tab选项卡,模仿着H+后台主题ui框架中的代码造轮子改造了下,可惜代码在公司,不能把代码外发出来(感觉这样被限制了很多,对于这样的公司没办法, ...

  8. easyUI tab页的显示与隐藏

    每天学习一点点 编程PDF电子书免费下载: http://www.shitanlife.com/code 隐藏:tab_option = $('#tabid').tabs('getTab'," ...

  9. IDEA中设置Tab多行显示、打开过多自动关闭的方法

    IDEA中默认Tab是单行显示的,而且默认允许同时打开10个Tab,继续打开Tab会根据规则关闭之前打开的Tab.但是可以通过设置来符合自己的使用习惯. 一.打开Tab过多自动关闭 1.选择File→ ...

随机推荐

  1. js小例子（标签页）

    运用js写的一个小例子,实现点击不同的标签出现不同的内容: <!DOCTYPE html> <html> <head> <meta chaset=" ...

  2. 静态成员函数（面向对象的static关键字）

    静态成员函数 与静态数据成员一样,我们也可以创建一个静态成员函数,它为类的全部服务而不是某一个类的具体对象服务.静态成员函数与静态数据成员一样,都是类的内部实现,属于类定义的一部分.普通的成员函数一般 ...

  3. The Parallel Challenge Ballgame[HDU1101]

    The Parallel Challenge Ballgame Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K ( ...

  4. div+css定位position详解

    div+css定位position详解 1.div+css中的定位position 最主要的两个属性:属性 absolute(绝对定位) relative(相对定位),有他们才造就了div+css布局 ...

  5. SCOI 2013 密码 & 乱搞

    题意: Fish 是一条生活在海里的鱼.有一天他很无聊,就到处去寻宝.他找到了位于海底深处的宫殿,但是一扇带有密码锁的大门却阻止了他的前进.通过翻阅古籍,Fish 得知了这个密码的相关信息:1. 该密 ...

  6. 关于jsp乱码问题的产生原因 及 解决方法。

    http://blog.csdn.net/caoxiaohong/article/details/1781777 JSP/JDBC MySQL乱码问题JSP的request 默认为ISO8859_1, ...

  7. float使内联支持宽高

    float使内联元素支持了宽高,可以设置宽高属性:float消除内联元素的空格:

  8. CentOS6.4 安装OpenResty和Redis 并在Nginx中利用lua简单读取Redis数据

    1.下载OpenResty和Redis OpenResty下载地址:wget http://openresty.org/download/ngx_openresty-1.4.3.6.tar.gz Re ...

  9. NOIp 2014 #2 联合权值 Label：图论 ！！！未AC

    题目描述 无向连通图G 有n 个点,n - 1 条边.点从1 到n 依次编号,编号为 i 的点的权值为W i ,每条边的长度均为1 .图上两点( u , v ) 的距离定义为u 点到v 点的最短距离. ...

  10. SDL 五子棋游戏

    http://www.jb51.net/article/79271.htm 1.定义窗口大小,棋盘大小 SDL_GetWindowSize()读取窗口大小, 由于棋盘是15*15格局,上下留白一行,在 ...