This example uses JavaScript to implement a scrolling page that is docked to the top when the div reaches the top. In IE under the effect of a little flicker, effect URL: http://www.keleyi.com/keleyi/phtml/fixdiv.htm
Here's the code:
Copy Code code as follows:
<body style= "margin:0px;" >
<div style= "Height:300px;background: #e0e0e0" ></div>
<div id= "fixedmenu_keleyi_com" style= "background: #ffffff; width:100%;" ><ul><li><a
href= "http://www.keleyi.com/menu/net/" target= "_blank" >.NET</a></li>
<li><a href= "http://www.keleyi.com/menu/javascript/" target= "_blank" >Javascript</a></li>
<li><a href= "http://www.keleyi.com/menu/jquery/" target= "_blank" >jQuery</a></li>
<li><a href= "http://www.keleyi.com/menu/csharp/" target= "_blank" >C#</a></li>
<li><a href= "http://www.keleyi.com/menu/other/" target= "_blank" > Other </a></li>
<li><a href= "http://www.keleyi.com/" target= "_blank" > Home </a></li></ul>
</div>
<div style= "Height:2600px;background: #999" ></div>
<script type= "Text/javascript" src= "Http://www.keleyi.com/keleyi/pmedia/jquery-1.9.1.min.js" ></script >
<script type= "Text/javascript" >
$ (function () {
var ie6 = document.all;
var dv = $ (' #fixedMenu_keleyi_com '), St;
Dv.attr (' Otop ', Dv.offset (). top); Store the distance at the top of the original distance
$ (window). Scroll (function () {
st = Math.max (Document.body.scrollTop | | document.documentElement.scrollTop);
if (St > parseint (dv.attr (' otop ')) {
if (IE6) {//IE6 does not support the fixed property, this effect can only be achieved by setting position for absolute and top
Dv.css ({position: ' absolute ', top:st});
}
else if (dv.css (' position ')!= ' fixed ') dv.css ({' position ': ' Fixed ', top:0});
else if (dv.css (' position ')!= ' static ') dv.css ({' position ': ' Static '});
});
});
</script>
</body>
