Javascript Fancy Stuff

2013.08.25发布于笔记暂无评论/目录

收集一些华丽的Javascript工具或代码。

侧边栏自动滚动

参考stackoverflow上的问题和这个jquery插件.

html代码如下:

`<div id="p-toc">`
目录
...
`</div>`

css代码如下:

/* scrool sidebar toc */
#p-toc {
    overflow-y: auto;
    height: 90%;
}
.sidebar-absolute {
    width: 160px;
    position: absolute;
}
.sidebar-fixed {
    top: 0px;
    width: 160px;
    position: fixed;
}

js代码如下:

(function(){
    var oDiv=document.getElementById("p-toc");
    var H=0,iE6;
    var Y=oDiv;
    while(Y){H+=Y.offsetTop;Y=Y.offsetParent};
    iE6=window.ActiveXObject&&!window.XMLHttpRequest;
    if(!iE6){
        window.onscroll=function() {
	    var s=document.body.scrollTop||document.documentElement.scrollTop;
	    if (s>H) {
	        oDiv.className="portal sidebar-fixed";
	        if (iE6) {
		    oDiv.style.top=(s-H)+"px";
		}
	    } else {
	        oDiv.className="portal sidebar-absolute";
	    }
	};
    }
})();

阅读资料

#javascript#note

评论