今天在死心钻研还钻研不懂这PHP代码的时候，就去网上求助了番…… 然后当我进入万戈的站点（<a href="http://wange.im">http://wange.im</a>），我就站稳了脚步，驻足观望了一会儿，便有了我要上天、入地的念头…… <!--more-->他里面有很多wordpress的优秀教程，对于我这个涉世很浅很浅的人来说，来学到他那里面的精髓还差的有点小远，由于他的博客更新得太快，还由于他的博客标题不太明显，更由于我的博客急需一个像样的文章来保持时刻的新鲜感，于是，在万戈的帮助下，便有了如下教程的诞生：（以下部分全部摘自万戈） 今天有位童鞋对本站主栏和侧边栏中间的“上天、入地”这个导航垂直滚动条产生了兴趣，但是在扣扣上这个东西三言两语也说不清，所以我就索性整理一下写了这么个教程。 实现这样的导航垂直滚动条的方法很多，关键是要知道其中原理也就不难了，从本站的这个垂直导航可以看出，它的基本效果就是可以随着浏览器的滚动条而滚动，换言之，这个垂直导航的位置相对于浏览器窗口是固定不变的。下面我提供两种实现的方法，各有特点，按需选择吧。因为两种方法的 HTML 和 CSS 部分大致相同，所以我就写在一个 DEMO 里了，这样也可以方便大家比较。 两种方法，一种是用纯 CSS 实现的（ DEMO 中对应的 id="l"），另一种是用 jQuery 实现的（ DEMO 中对应的 id="r"）。 HTML 部分： <pre lang="xml" escaped="true"> <div id="r" class="scroll"><a title="我要上天" href="#">上</a> <a title="Q我吧~" href="http://wange.im/qq" target="_blank">Q</a> <a title="邮我吧~" href="http://wange.im/gtalk" target="_blank">邮</a> <a title="我要入地" href="#">下</a></div> <div id="l" class="scroll"><a title="我要上天" href="#">上</a> <a title="Q我吧~" href="http://wange.im/qq" target="_blank">Q</a> <a title="邮我吧~" href="http://wange.im/gtalk" target="_blank">邮</a> <a title="我要入地" href="#">下</a></div> </pre> CSS 部分： <pre lang="css" line="1">/* 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 左侧导航滚动 */ </pre> jQuery 部分： <pre lang="java"><!-- 以下脚本仅作用于右侧导航滚动 --><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js" type="text/javascript"></script><script type="text/javascript">// <![CDATA[ $(document).ready(function(){ $(window).scroll(function() { var bodyTop = 0; if (typeof window.pageYOffset != 'undefined') { bodyTop = window.pageYOffset } else if (typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat') { bodyTop = document.documentElement.scrollTop } else if (typeof document.body != 'undefined') { bodyTop = document.body.scrollTop } $("#r").css("top", 250 + bodyTop); }); }); // ]]></script><!-- 以上脚本仅作用于右侧导航滚动 --></pre> 两者可以比较一下，用 jQuery 的方法在拖动浏览器滚动条的时候会有抖动的瑕疵，而用纯 CSS 的方法则很平滑，但是我们也会发现，CSS 的方法中用到了 HACK 和 expression，这都是我们写页面时需要尽量避免的，特别是 expression，不可多用，会影响 IE 浏览器的性能，RP 差一些的还会引起 IE 假死和崩溃。 另外，关于“上天、入地”这样锚链接之间的互相滚动的效果可以参看这篇文章，这里就不重复说明了。 Loading... 今天在死心钻研还钻研不懂这PHP代码的时候，就去网上求助了番…… 然后当我进入万戈的站点（<span class="external-link"><a class="no-external-link" href="http://wange.im" target="_blank"><i data-feather="external-link"></i>http://wange.im</a></span>），我就站稳了脚步，驻足观望了一会儿，便有了我要上天、入地的念头…… <!--more-->他里面有很多wordpress的优秀教程，对于我这个涉世很浅很浅的人来说，来学到他那里面的精髓还差的有点小远，由于他的博客更新得太快，还由于他的博客标题不太明显，更由于我的博客急需一个像样的文章来保持时刻的新鲜感，于是，在万戈的帮助下，便有了如下教程的诞生：（以下部分全部摘自万戈） 今天有位童鞋对本站主栏和侧边栏中间的“上天、入地”这个导航垂直滚动条产生了兴趣，但是在扣扣上这个东西三言两语也说不清，所以我就索性整理一下写了这么个教程。 实现这样的导航垂直滚动条的方法很多，关键是要知道其中原理也就不难了，从本站的这个垂直导航可以看出，它的基本效果就是可以随着浏览器的滚动条而滚动，换言之，这个垂直导航的位置相对于浏览器窗口是固定不变的。下面我提供两种实现的方法，各有特点，按需选择吧。因为两种方法的 HTML 和 CSS 部分大致相同，所以我就写在一个 DEMO 里了，这样也可以方便大家比较。 两种方法，一种是用纯 CSS 实现的（ DEMO 中对应的 id="l"），另一种是用 jQuery 实现的（ DEMO 中对应的 id="r"）。 HTML 部分： <pre lang="xml" escaped="true"> <div id="r" class="scroll"><a title="我要上天" href="#">上</a> <a title="Q我吧~" href="http://wange.im/qq" target="_blank">Q</a> <a title="邮我吧~" href="http://wange.im/gtalk" target="_blank">邮</a> <a title="我要入地" href="#">下</a></div> <div id="l" class="scroll"><a title="我要上天" href="#">上</a> <a title="Q我吧~" href="http://wange.im/qq" target="_blank">Q</a> <a title="邮我吧~" href="http://wange.im/gtalk" target="_blank">邮</a> <a title="我要入地" href="#">下</a></div> </pre> CSS 部分： <pre lang="css" line="1">/* 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 左侧导航滚动 */ </pre> jQuery 部分： <pre lang="java"><!-- 以下脚本仅作用于右侧导航滚动 --><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js" type="text/javascript"></script><script type="text/javascript">// <![CDATA[ $(document).ready(function(){ $(window).scroll(function() { var bodyTop = 0; if (typeof window.pageYOffset != 'undefined') { bodyTop = window.pageYOffset } else if (typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat') { bodyTop = document.documentElement.scrollTop } else if (typeof document.body != 'undefined') { bodyTop = document.body.scrollTop } $("#r").css("top", 250 + bodyTop); }); }); // ]]></script><!-- 以上脚本仅作用于右侧导航滚动 --></pre> 两者可以比较一下，用 jQuery 的方法在拖动浏览器滚动条的时候会有抖动的瑕疵，而用纯 CSS 的方法则很平滑，但是我们也会发现，CSS 的方法中用到了 HACK 和 expression，这都是我们写页面时需要尽量避免的，特别是 expression，不可多用，会影响 IE 浏览器的性能，RP 差一些的还会引起 IE 假死和崩溃。 另外，关于“上天、入地”这样锚链接之间的互相滚动的效果可以参看这篇文章，这里就不重复说明了。 © 允许规范转载 赞 如果觉得我的文章对你有用，请随意赞赏