Let me introduce you to a few examples
| The code is as follows |
Copy Code |
| <!doctype html>
<meta charset= "UTF-8" >
<title>Document</title>
<script type= "Text/javascript" src= "Http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js" >< /script>
<script> Window.onload = function () {
$ (window). Scroll (function () {
var STop = $ (window). scrolltop ();
if (STop > 100) {
$ (' #pinning '). Show ();
} else {
$ (' #pinning '). Hide ();
};;
});
}; </script>
<body>
<div id= "pinning" style= "display:none; position:fixed; top:5px; left:5px; width:500px; height:30px; BORDER:3PX solid #ccc; Text-align:right; " > Fixed Layer </div>
<div style= "width:500px; border:1px solid #000; height:3000px; " > This is content <br> This is content <br> This is content <br> This is content <br> This is content <br> This is content <br> This is content <br> this is content < Br> This is content <br></div>
</body>
|
Example Two
| The code is as follows |
Copy Code |
| <! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title> Untitled Document </title>
<script src= "Http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type= "Text/javascript" ></ Script>
<script type= "Text/javascript" >
$ (function () {
$ (window). Scroll (function () {
var scrolltop = $ (document). ScrollTop ();
var headheight = $ (". Head"). Height ();
if (scrolltop >= headheight) {
$ ("#fudong"). AddClass ("fixed");
}else{
$ ("#fudong"). Removeclass ("fixed");
}
})
})
</script>
<style>
*{margin:0;padding:0}
* html,* HTML Body{background:url (about:blank) fixed}
#wrap {width:950px;height:2000px;margin:0 auto;border:1px solid #000;p Osition:relative}
#wrap. Head {height:200px;background: #AA5F55}
#fudong {width:950px;height:30px;background: #ccc;}
. Fixed {position:fixed;_position:absolute;top:0;top:expression (eval (document.documentElement.scrollTop + 0))}
</style>
<body>
<div id= "Wrap" >
<div class= "Head" ></div>
<div id= "Fudong" >1111</div>
</div>
</body>
|
