分享刚写的一个仿Fixed的js

constanine_xia 2013-09-09 11:21:59

如题。但是还有些小问题，希望发现的大神一起帮忙解决
代码如下

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

 <head>

  <title> new document </title>

 <style type="text/css">

 html,body{

 width:100%;

 height:100%;

 }

 div,body{

 margin:0px;

 padding:0px;

 }

 

 #show1{

 background-color:red;

 margin:10px;

 width:53px;

 height:120px;

 color:white;

 float:left;

 }



 #show2{

 background-color:red;

  margin:10px;

  width:150px;

 height:60px;

 color:white; 

 position:absolute;

 }

 

  #show3{

  margin:10px;

  width:500px;

 color:white;

 float:left;

 }

 

 .x120div{

 background-color:red;

 margin:0px;

 padding:0px;

 width:700px;

 height:60px;

 color:white;

 }

 </style>

 </head>

 

 

<script type="text/javascript">



window.onload = function () {

            var element = window;

			var showheight=0;

			var maxheight=document.body.scrollHeight;

			var fianlScreen=document.body.offsetHeight ;

            if (element.addEventListener) {   //FireFox

                element.addEventListener("DOMMouseScroll", function (event) {

                    mousewheel(event);

                });

            }

            else {         //IE、Chrome 

                element.onmousewheel = function (event) {

                    mousewheel(event);

                }

            }

			

            var mousewheel = function (ev) {

                var ev = window.event || ev;

				var show=document.getElementById("show2");

                var scrollTop = element.scrollTop;

                var scrollHeight = element.scrollHeight;

                var height = element.clientHeight;

                var delta = ev.type == 'DOMMouseScroll' ? ev.detail * 34 : ev.wheelDelta;

				showheight+=delta;

				if(showheight<0){

				  showheight=1;

				}else if(showheight>maxheight-fianlScreen){

				  showheight=maxheight-fianlScreen;

				}

				show.style.top=showheight+"px";           

            }

        }

</script>

 <body>

  <!--<div onscroll="document.getElementById('f').style.top=this.scrollTop+'px'" 

  style="height:80px;width:100px;overflow:auto;border:1px solid #000;">

  1<br/>2<br/>3<br/>4<br/>5<br/>6<br/>

  1<br/>2<br/>3<br/>4<br/>5<br/>6<br/>

  <div id="f" style="height:10px;width:10px;background:red;position:absolute;top:0"></div>

  </div>-->

  <div id="show2"></div>

  <div id="show3">

	<div class="x120div" style="background-color:#FF44AA ;">1</div>  

	<div class="x120div" style="background-color:#FF3333 ;">2</div>  

	<div class="x120div" style="background-color:#FF7744 ;">3</div> 

	<div class="x120div" style="background-color:#FFAA33;">4</div>  

	<div class="x120div" style="background-color:#FFCC22;">5</div>  

	<div class="x120div" style="background-color:#FFFF33;">6</div>

	<div class="x120div" style="background-color:#CCFF33;">7</div>  

	<div class="x120div" style="background-color:#99FF33;">8</div>  

	<div class="x120div" style="background-color:#33FF33;">9</div>

	<div class="x120div" style="background-color:#33FFAA;">10</div> 

	<div class="x120div" style="background-color:#33FFFF;">11</div> 

	<div class="x120div" style="background-color:#33CCFF;">12</div>

	<div class="x120div" style="background-color:#5599FF;">13</div> 

	<div class="x120div" style="background-color:#5555FF;">14</div> 

	<div class="x120div" style="background-color:#7744FF;">15</div>

	<div class="x120div" style="background-color:#FF44AA ;">1</div>  

	<div class="x120div" style="background-color:#FF3333 ;">2</div>  

	<div class="x120div" style="background-color:#FF7744 ;">3</div> 

	<div class="x120div" style="background-color:#FFAA33;">4</div>  

	<div class="x120div" style="background-color:#FFCC22;">5</div>  

	<div class="x120div" style="background-color:#FFFF33;">6</div>

	<div class="x120div" style="background-color:#CCFF33;">7</div>  

	<div class="x120div" style="background-color:#99FF33;">8</div>  

	<div class="x120div" style="background-color:#33FF33;">9</div>

	<div class="x120div" style="background-color:#33FFAA;">10</div> 

	<div class="x120div" style="background-color:#33FFFF;">11</div> 

	<div class="x120div" style="background-color:#33CCFF;">12</div>

	<div class="x120div" style="background-color:#5599FF;">13</div> 

	<div class="x120div" style="background-color:#5555FF;">14</div> 

	<div class="x120div" style="background-color:#7744FF;">15</div>

  </div>





 </body>

</html>