滚动固定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">1</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>适用人群：18-70周岁</span></h2>
            </div>
        </div>
        <!-- 价格 END -->
    </div>
    <div class="page-width">
        <!-- 保障说明 -->
        <div class="bz-table" id="page_Tab_cell0">
            <div  style="height:500px;">11111111</div>
        </div>
        <!-- 保障说明 END-->
        <!-- 保障疑问 -->
        
        <!-- 保障疑问 END-->
        <!--常见问题-->
        <div class="page_tab_cont" id="page_Tab_cell1">
            <div  style="height:500px;">222222222</div>
        </div>
        <!--常见问题  END-->
        <!--特别声明-->
        <div class="page_tab_cont" id="page_Tab_cell2">
            
            <div  style="height:500px;">33333333</div>
        </div>
        <!--特别声明  END-->
        <!--客户评价-->
        
        <div class="page_tab_cont mt20" id="page_Tab_cell3">
          <div  style="height:500px;">4444444444</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[1].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 == 0){
        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: 10,             //分块距离顶部高度——单数字视为每个分块距离顶部高度一样,也可设置为数组定义不同的高度
        start_h: undefined,     //开始高度
        end_h: 500,             //结束高度
        animate: 500            //滚动速度
    };
    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,0);

        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 = 0; i < length; i++){
                cell_t[i] = n;
            }
        }

        for(i = 0; i < length; i++){
            obj[i] = (cell_class == '.') ? $(cell + i) : $(cell_class).eq(i);
        }

        function countPos(){
            for(i = 0; i < length; i++){
                cellH[i] = obj[i].length ? obj[i].offset().top - $menuH - cell_t[i] : 0;
                if (vertical == "b") {
                    cellH[i] += $menuH;
                }
            }
        }

        countPos();

        //tab方式
        if(opt.type == "tab"){
            if(opt.tab_hide){
                for(i = 0; i < length; i++){
                    obj[i].hide();
                }
                obj[0].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[0] + 10}, opt.animate);
                    obj[index].show().siblings().hide();
                })
            })
        }

        function judge_statu(){
            countPos();
            nowH = $(this).scrollTop();
            for(i = 0; i < length; i++){
                contain = i == length-1 ? 999999 : cellH[i + 1];
                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] + 10}, 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: 20                     //滚动到时分块距离顶部的距离
});

</script>
<script type="text/javascript" src="http://v2.jiathis.com/code/jia.js" charset="utf-8"></script>

</body>
</html>
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/iicoo/p/5055244.html