JS: 随翻页滚动对象的简单实现
作者：黑馬
JavaScript里，可以通过 document.body.scrollTop 获得当前浏览器滚动条的 top 值，它返回的具体值为从0开始的自然数（根据浏览器滚动条的实际滚动情况）。运行以下示例，拖曳滚动条或用其他方式给页面翻页的同时观察一下浏览器的标题栏，我们会看到浏览器标题的title字串实时发生变化（要求页面的滚动条处于可用状态）：
function chk_scroll() {
a = document.body.scrollTop;
document.title = a;
setTimeout("chk_scroll()",10);
}
chk_scroll();
这意味着，我们可以通过实时监测滚动条的 top 值来实时调整某个可视对象（譬如导航菜单）的位置，使之永远处于可视位置且此位置为屏幕上某个固定的位置。实现此功能，我们只需要略为修改一下上面的示例即可：
function Menu_Scroll() {
a = document.body.scrollTop + 10;
document.getElementById("menu").style.pixelTop =a ;
//以下是W3C標準: 注意它和非W3C標準的區別
//a = (document.documentElement.scrollTop+10)+"px";
//document.getElementById("menu").style.top = a;
setTimeout("Menu_Scroll()",10);
}
Menu_Scroll();
上述示例，我们通过对象的 id 号（getElementById）来指定其 top 值不 a（即滚动条当前的高度加上10个像素），并通过 setTimeout() 内置函数每隔1秒执行一次 Menu_Scroll() 函数自身，这样就达成了菜单对象随翻页动作滚动的目的。
当然，我们得有一个可视元素，且其 id 值为“menu”，并且，我们需要定义其初始 style 值，特别的，定义位置（position，绝对或相对值均可）、top 和 left 值：
<div id="menu" style="position:absolute;top:10px;left:20px;width:90px;height:30px; z-index:6;border:1px solid #aaa;padding:10px;background-color:#ddd;">導航菜單</div>
以上脚本在IE浏览器环境下运行通过；Mozilla Firefox环境下，非W3C标准的未通过，W3C标准的运行良好；其他浏览环境未做测试。
【 黑馬 2008.10.9 於 Tonglin 】
网 |
更新日期：2008年10月9日 