首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 企业软件 > 行业软件 >

导航条与滚动条其间关系用例(类似天猫)

2012-12-06 
导航条与滚动条之间关系用例(类似天猫)!DOCTYPE HTMLhtml??? head??????? meta charsetgb2312 /

导航条与滚动条之间关系用例(类似天猫)

<!DOCTYPE HTML>
<html>
??? <head>
??????? <meta charset="gb2312" />
??????? <title></title>
??????? <style>
??????????? body {
??????????????? height:2000px;
??????????? }
??????????? div {
??????????????? position:absolute; right:40px; top:40px;
??????????????? width:90%; height:30px;
??????????????? background:#ddd;
??????????? }
??????? </style>
??? </head>
??? <body>
??????? <div id="test">111111111</div>
??????? <script>
??????????? function toolbar(el){
??????????????? el = typeof el == 'string' ? document.getElementById(el) : el;
??????????????? var elTop = el.offsetTop;
??????????????? var sTop = 0;
??????????????? window.onscroll = function(){
??????????????????? sTop = document.body.scrollTop || document.documentElement.scrollTop;
??????????????????? if( sTop > elTop ){
??????????????????????? el.style.top = sTop + 'px';
??????????????????? }else{
??????????????????????? el.style.top = elTop + 'px';
??????????????????? }
??????????????? }
??????????? }
??????????? toolbar('test');
??????? </script>
??? </body>
</html>

热点排行