滚动固定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→ ...

随机推荐

转 Delphi Invalidate的用法
1.Invalidate介绍 void Invalidate( BOOL bErase = TRUE ); 该函数的作用是使整个窗口客户区无效.窗口的客户区无效意味着需要重绘,例如,如果一个被其它窗口 ...
Android App 性能优化实践
本文记录了Android App优化需要用到的工具和以及在实践中的Tips.也算对我这半年来部分工作的总结. 工具 Hierarchy Viewer 是 Android SDK 自带的 Layout ...
iOS 关于iOS开发中的delegate
有A.B两个对象,A要完成某件事,想让B帮它做. 这时候,A中就要实例化一个B的对象b,A还要在头文件中声明协议,然后在B中实现协议中对应的方法. 这时候再把A的delegate设置为b,在需要的地方 ...
POJ3613 Cow Relays（矩阵快速幂）
题目大概要求从起点到终点恰好经过k条边的最短路. 离散数学告诉我们邻接矩阵的k次幂就能得出恰好经过k条路的信息,比如POJ2778. 这题也一样,矩阵的幂运算定义成min,而min满足结合律,所以可以 ...
Apache ActiveMQの版本更迭和Apache ActiveMQの故障转移
本文描述apache activemq 版本更迭的原因以及Apache ActiveMQのThe Failover Transport new features in 5.2.0 1.对信息的传输/ ...
myeclipse操作记录
myeclipse里面jsp页面里面js注释快捷键 ctrl + shift +cctrl + / MyEclipse 每次保存都要building workspace的解决方法方法一:菜单栏-&g ...
unity awake start 的区别
void Awake (){ } //初始化函数,在游戏开始时系统自动调用.一般用来创建变量之类的东西. void Start(){ } //初始化函数,在所有Awake函数运行完之后(一般是这样,但 ...
linux 安装eclipse 和cdt
这个东西说起来简单,但是经历了无数次到失败,终于还是安装完成了. 最早到时候我下载了eclipse和cdt让后安装,安装完成以后,无法运行和编译程序后来我学到了一个牛逼的命令yum 这个命令会帮助我 ...
BZOJ4356 : Ceoi2014 Wall
求出左上角到每个需要保护的点左上角的最短路树,那么最优解一定圈住了它们. 然后将每个点拆成四个点,四个点之间如果没跨越最短路树的树边,那就连0权边. 每个需要保护的点四周4个点都不可通行,求出最短路即 ...
【BZOJ】1225: [HNOI2001] 求正整数
http://www.lydsy.com/JudgeOnline/problem.php?id=1225 题意:给一个数n,求一个最小的有n个约数的正整数.(n<=50000) #include ...

滚动固定TAB在顶部显示

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

随机推荐

热门专题