导航条与滚动条之间关系用例(类似天猫)
<!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>