滚动固定TAB在顶部显示

时间：2022-09-17 19:45:48
<!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在顶部显示的更多相关文章

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

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

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

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

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

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

  4. Delphi for iOS开发指南&lpar;8&rpar;&colon;在iOS应用程序中使用Tab组件来显示分页

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

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

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

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

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

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

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

  8. easyUI tab页的显示与隐藏

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

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

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

随机推荐

  1. 思科交换机配置DHCP的四个方面

    这里我们主要讲解了思科交换机配置DHCP的相关内容.我们对网络拓扑先进行一下了解,然后对于其在进行一下说明,之后对于配置的代码和命令再进行一下解析. 思科交换机配置DHCP一.网络拓扑 思科交换机配置 ...

  2. 论文 查重 知网 万方 paperpass

    相信各个即将毕业的学生或在岗需要评职称.发论文的职场人士,论文检测都是必不可少的一道程序.面对市场上五花八门的检测软件,到底该如何选择?选择查重后到底该如何修改?现在就做一个知识的普及.其中对于中国的 ...

  3. homework160809207刘兆轩

    # include <stdio.h> int main() { float a,b,c,m,n,l,k,j,i; printf("请输入三个数:\n"); scanf ...

  4. Codecademy学习打卡1

    ————————————————————————— 想学习编程,并且打算“闭门造车”式的开启我的自学生涯. 前段时间买了一门厚重的“Java从入门到精通”.或许是对代码,电脑编程环境的陌生,再加上纯小 ...

  5. jmeter学习记录--10--二次开发环境搭建

    JMeter源码集成到Eclipse.JMeter二次开发(1)-eclipse环境配置及源码编译 ,根据此文章记录将jmeter源码集成到myecplise 第一步:下载jmeter源码http:/ ...

  6. SpringMvc父子容器

      使用监听器listener来加载spring的配置文件:如下 <context-param> <param-name>contextConfigLocation</p ...

  7. IdentityServer4-主题

    一.Startup 二.定义Resources 三.定义Clients 四.登录 五.使用外部身份提供商登录 六.Windows身份验证 七.登出 八.注销外部身份提供商 九.联合注销 十.联合网关 ...

  8. word2010自定义的多级列表编号变成黑块的解决办法

    首先,看图说话 是的,当我保存Word再打开之后,我辛辛苦苦(没错,小白有罪,调来调去真辛苦)搞得多级列表编号变成了黑块,默默无言,只有泪千行,还好有万能的Google. 解决办法: 将光标移到黑块的 ...

  9. PHP开发——常见问题

    执行顺序 常见数据类型 字符乱码

  10. linux邮件系统的优势和便利性

    国内知名企业邮箱系统品牌商U-Mail张工在接受有关媒体采访时,特别推荐Linux版本的邮件系统.有利于与移动平台整合在Linux的U-Mail邮件服务器软件后台添加了微信版管理模块,可以查看列表,而 ...

相关文章