<script>
var left = document.getElementById('main-left');
var right = document.getElementById('main-right');
var array = document.getElementsByClassName('zone-box');
function buildDiv(scroll, tb, size) {
var old = scroll.getElementsByTagName("div");
if (old.length > 0) {
for (var o = 0; o < old.length; o++) {
old[o].remove();
}
}
var tb2 = tb.cloneNode(true);
var len = tb2.rows.length;
for (var i = len; i > size; i--) {
tb2.deleteRow(size);
}
var bak = document.createElement("div");
bak.style.width = scroll.clientWidth + 'px';
scroll.appendChild(bak);
bak.appendChild(tb2);
bak.style.position = "absolute";
bak.style.backgroundColor = "#cfc";
//表头背景颜色,请保持和css中定义颜色一样
bak.style.display = "block";
bak.style.left = 0;
bak.style.top = "0px";
scroll.onscroll = function () {
bak.style.top = this.scrollTop + "px";
}
}
window.onload = function () {
for (var s = 0; s < array.length; s++) {
if (array[s].getElementsByTagName('table').length > 0) {
buildDiv(array[s], array[s].getElementsByTagName('table')[0], 1);
}
}
//添加目录
var h2List = [], h3List = [], h4List = [];
var i1 = 0, i2 = 0, i3 = 0, n1 = 0, n2 = 0, n3 = 0;
var temp = '<dl>';
var cateList = right.innerHTML.match(/(<h[2-5][^>]*>.*?<\/h[2-5]>)/ig);
for (var i = 0; i < cateList.length; i++) {
if (/(<h2[^>]*>.*?<\/h2>)/ig.test(cateList[i])) {
n1++;
n2 = 0;
temp += '<dd class="cate-item1"><span>' + n1 + '</span><a href="#' + n1 + '">' + cateList[i].replace(/<[^>].*?>/g, "") + '</a></dd><div style="clear:both"></div>';
h2List[i1] = n1;
i1++;
} else {
if (/(<h3[^>]*>.*?<\/h3>)/ig.test(cateList[i])) {
n2++;
temp += '<dd class="cate-item2"><span>' + n1 + '.' + n2 + '</span><a href="#' + n1 + '_' + n2 + '">' + cateList[i].replace(/<[^>].*?>/g, "") + '</a></dd><div style="clear:both"></div>';
h3List[i2] = n1 + '_' + n2;
i2++;
n3 = 0;
} else {
n3++;
temp += '<dd class="cate-item3"><span>' + n1 + '.' + n2 + '.' + n3 + '</span><a href="#' + n1 + '_' + n2 + '_' + n3 + '">' + cateList[i].replace(/<[^>].*?>/g, "") + '</a></dd><div style="clear:both"></div>';
h4List[i3] = n1 + '_' + n2 + '_' + n3;
i3++;
}
}
}
temp += '</dl>';
left.innerHTML = temp; //默认第一个处于aitive状态
left.getElementsByTagName('dd')[0].className = left.getElementsByTagName('dd')[0].className + " active";
};
left.style.height = (document.documentElement.clientHeight - 200) + "px";
window.onresize = function () {
var array = document.getElementsByClassName('zone-box');
for (var s = 0; s < array.length; s++) {
if (array[s].getElementsByTagName('table').length > 0) {
buildDiv(array[s], array[s].getElementsByTagName('table')[0], 1);
}
}
left.style.height = (document.documentElement.clientHeight - 200) + "px";
}; //点击右侧书签添加active
if (left.addEventListener) {
left.addEventListener("click", function (e) {
for (var c = 0; c < left.getElementsByTagName('dd').length; c++) {
left.getElementsByTagName('dd')[c].className = left.getElementsByTagName('dd')[c].className.replace("active", "");
}
e.target.parentNode.className = e.target.parentNode.className + " active";
});
} else {
left.attachEvent("onclick", function (e) {
for (var c = 0; c < right.getElementsByTagName('dd').length; c++) {
left.getElementsByTagName('dd')[c].className = left.getElementsByTagName('dd')[c].className.replace("active", "");
}
e.srcElement.parentNode.className = e.srcElement.parentNode.className + " active";
})
}
window.onscroll = function () {
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
if (scrollTop >= 100) {
left.style.position = "fixed";
left.style.top = 10 + 'px';
} else {
left.style.position = "static";
}
}
</script>

左侧滚动条js的更多相关文章

  1. 自定义滚动条Js简版

    <!DOCTYPE html><html><head><meta charset="UTF-8"><title>自定义滚 ...

  2. 防刷新jq左侧滚动条导航展示

    html代码: <div class="fangchan_navcont">        <div class="fangchan_nav" ...

  3. javascript滚动条之ScrollBar.js

    ScrollBar.js是一个仅仅120行的滚动条JS插件,使用非常方便 详情阅读:https://git.oschina.net/wuquanyao/scrollbar.js/*========== ...

  4. gVIM+zencoding快速开发HTML/CSS/JS(适用WEB前端)

    一.真正解决了UTF-8中文乱码的各种问题(菜单乱码,内容乱码,提示信息乱码),不用担心WIN用默认编码写的东西在Linux乱码,或在Linux(zh_CN.UTF-8时)写的东西在WIN下乱码.在A ...

  5. js汉语转拼音(全拼、首字母、拼音首字母)

    新建js文件first_alphabet.js // JavaScript Document // 汉字拼音首字母列表 本列表包含了20902个汉字,用于配合 ToChineseSpell //函数使 ...

  6. 第三百五十节,Python分布式爬虫打造搜索引擎Scrapy精讲—selenium模块是一个python操作浏览器软件的一个模块,可以实现js动态网页请求

    第三百五十节,Python分布式爬虫打造搜索引擎Scrapy精讲—selenium模块是一个python操作浏览器软件的一个模块,可以实现js动态网页请求 selenium模块 selenium模块为 ...

  7. 二十九 Python分布式爬虫打造搜索引擎Scrapy精讲—selenium模块是一个python操作浏览器软件的一个模块,可以实现js动态网页请求

    selenium模块 selenium模块为第三方模块需要安装,selenium模块是一个操作各种浏览器对应软件的api接口模块 selenium模块是一个操作各种浏览器对应软件的api接口模块,所以 ...

  8. 《selenium2 python 自动化测试实战》(16)——js操作补充

    js修改readonly属性 我们看到这里日期框标签中有readonly属性,如果我们直接send_keys就无法输入内容,这时我们需要先去掉readonly属性: js ='document.get ...

  9. selenium--浏览器滚动条操作

    前戏 在进行web自动化的时候,selenium只能找当前屏幕上的标签,如果标签在当前页面没显示下,需要拖动滚动条才能查看到这个元素,这时候就要操作浏览器的滚动条,让当前页面显示这个元素才可以操作,在 ...

随机推荐

  1. Flink HA 搭建坑

    目前网上能找到的做HA的教程基本都无法真正做到多机高可用,包括官方文档,经过很久的折腾,终于做到了多机高可用,希望其它人不再被坑. 集群模式安装 前提条件: 机器已经安装好Java环境 jobMana ...

  2. SqlServer中的事务使用

    一.事务的概念和特点 事务(transaction)是恢复和并发控制的基本单位. 事务的特点 原子性:事务是一个工作单元,要都成功,要么的失败 例子:A付款给B,A余额-100,B余额+100,只能都 ...

  3. wordcloud制作logo

    准备工作: 1.txt文本(ASCII) 2.参照图(色差大或自行调整扫描参数) 3.pycharm安装wordcloud 源码: from os import path from PIL impor ...

  4. HDU - 6444 Neko's loop(循环节+最大子段和)

    http://acm.hdu.edu.cn/showproblem.php?pid=6444 题意 一个有n个数的环,每次循环走k步,走到每个点都有具体的权值,问在任意点出发最多走m步的情况下,一开始 ...

  5. HDU 1026(迷宫 BFS+打印)

    题意是要穿过一个迷宫并且将每一步打印出来. 用宽搜的方法找到路径,在 vis 中存一下方向,只是这题被看到的一种不太对的运算符重载坑了很久...... 代码如下: #include <bits/ ...

  6. JS盒模型

    JS盒模型 ***** 1.width | height parseInt(getComputedStyle(ele, null).getPropertyValue('width')) parseIn ...

  7. 【转】javascript代码混淆和压缩

    隐藏 JavaScript 源代码?不,你只能混淆和压缩JavaScript源代码 http://www.yaohaixiao.com/tools/confuse-and-compressing-ja ...

  8. Weex Ui - Weex Conf 2018 干货分享

    本文是2018年 Weex Conf 中议题<Weex + Ui>的内容文档整理,主要给大家介绍飞猪 Weex 技术体系从无到有的过程,包括 Weex Ui 组件库的开发和发展,重点分享在 ...

  9. 关于AJAX的基础操作

    AJAX开发 AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术. AJAX = 异步 Java ...

  10. FlexPaper 2.3.6 远程命令执行漏洞 附Exp

    影响版本:小于FlexPaper 2.3.6的所有版本 FlexPaper (https://www.flowpaper.com) 是一个开源项目,遵循GPL协议,在互联网上非常流行.它为web客户端 ...