小十的个人博客

@小十

十分之十的小十

文章 340
朋友 15
来访 1814

LATEST POSTS

  • 郑州
  • www.xiaoten.com
  • 网站成立3274天

小十

  • 收藏品

我要上天、入地~

今天在死心钻研还钻研不懂这PHP代码的时候,就去网上求助了番……
然后当我进入万戈的站点(http://wange.im),我就站稳了脚步,驻足观望了一会儿,便有了我要上天、入地的念头……

他里面有很多wordpress的优秀教程,对于我这个涉世很浅很浅的人来说,来学到他那里面的精髓还差的有点小远,由于他的博客更新得太快,还由于他的博客标题不太明显,更由于我的博客急需一个像样的文章来保持时刻的新鲜感,于是,在万戈的帮助下,便有了如下教程的诞生:(以下部分全部摘自万戈)

今天有位童鞋对本站主栏和侧边栏中间的“上天、入地”这个导航垂直滚动条产生了兴趣,但是在扣扣上这个东西三言两语也说不清,所以我就索性整理一下写了这么个教程。

实现这样的导航垂直滚动条的方法很多,关键是要知道其中原理也就不难了,从本站的这个垂直导航可以看出,它的基本效果就是可以随着浏览器的滚动条而滚动,换言之,这个垂直导航的位置相对于浏览器窗口是固定不变的。下面我提供两种实现的方法,各有特点,按需选择吧。因为两种方法的 HTML 和 CSS 部分大致相同,所以我就写在一个 DEMO 里了,这样也可以方便大家比较。

两种方法,一种是用纯 CSS 实现的( DEMO 中对应的 id="l"),另一种是用 jQuery 实现的( DEMO 中对应的 id="r")。

HTML 部分:



 


CSS 部分:

/* Start 公共样式 */
body {
height:3000px;    /* 为了出现滚动条,强行撑开页面高度 */
}
.scroll a {
width:15px;
height:15px;
display:block;
margin-bottom:5px;
font:12px/15px Arial,SimSun;
text-align:center;
border:1px solid #000;
text-decoration:none;
}
/* Start 公共样式 */
/* Start 右侧导航滚动 */
#r {
right:30%;
position:absolute;
top:250px;
}
/* End 右侧导航滚动 */
/* Start 左侧导航滚动 */
#l {
left:30%;
position:fixed;
top:250px;
_position:absolute;
_top:expression(250+((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+"px");
}
html {
/* 下面两行是为了解决 IE6 下抖动的 bug */
_background-image:url(about:blank);
_background-attachment:fixed;
}
/* End 左侧导航滚动 */

jQuery 部分:

两者可以比较一下,用 jQuery 的方法在拖动浏览器滚动条的时候会有抖动的瑕疵,而用纯 CSS 的方法则很平滑,但是我们也会发现,CSS 的方法中用到了 HACK 和 expression,这都是我们写页面时需要尽量避免的,特别是 expression,不可多用,会影响 IE 浏览器的性能,RP 差一些的还会引起 IE 假死和崩溃。

另外,关于“上天、入地”这样锚链接之间的互相滚动的效果可以参看这篇文章,这里就不重复说明了。

Comments | NOTHING

  游客,你好 修改资料

*邮箱和昵称必须填写