For example: Taobao merchandise details, scroll down to pull, merchandise details and evaluation that NAV will be fixed, now many sites have such a similar effect, now popular this? Yuan Fang, what do you think? I also looked for code on the Internet, it has been tried ah, a lot of code chaos and useless. So, I write one myself, the code is very simple, only 10 lines, but unfortunately, incompatible IE6, if who has a compatible IE6 examples, please advise.
Just post the code.
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "HTTP://WWW.W3.ORG/TR/HTML4/LOOSE.DTD" >
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 ">
<title>demo</title>
<script src= "Jquery-1.4.1.min.js" type= "Text/javascript" ></script>
<script type= "Text/javascript" >
$ (document). Ready (function () {
var loaded = true;
var top = $ (' #demo '). Offset (). Top;
function Add_data ()
{
var scrolla=$ (window). scrolltop ();
var cha=parseint (top)-parseint (Scrolla);
if (Loaded && cha<=0)
{
$ ("#demo"). Removeclass ("Demo2"). AddClass ("Demo1");
$ ("#demo"). HTML ("I'm blue now, pull the scroll bar up and I'll show it red.") I have fixed it. ");
Loaded=false;
}
if (!loaded && cha>0)
{
$ ("#demo"). Removeclass ("Demo1"). AddClass ("Demo2");
$ ("#demo"). HTML ("I'm red now, pull the scroll bar down and I'll show it blue.") I haven't fixed it yet. ");
Loaded=true;
}
}
$ (window). Scroll (Add_data);
});
</script>
<style type= "Text/css" >
. demo
{
border:1px solid #dcdcdc;
width:300px;
margin-top:10px;
Overflow:auto;
Text-align:left;
Background-color: #ffffff;
height:200px;
}
. demo1
{
position:fixed;
_position:absolute;
top:0px;
Background-color: #0000ff;
height:200px;
width:300px;
Color: #ffffff;
}
. Demo2
{
border:1px solid #dcdcdc;
width:300px;
margin-top:10px;
Overflow:auto;
Text-align:left;
Background-color: #ff0000;
height:200px;
Color: #ffffff;
}
</style>
<body>
<div class= "Demo" >
</div>
<div class= "Demo" >
</div>
<div class= "Demo" >
</div>
<div class= "Demo" >
</div>
<div class= "Demo2" id= "Demo" >
I'm red now, put the scroll down I'll show it blue. I haven't fixed it yet.
</div>
<div class= "Demo" >
</div>
<div class= "Demo" >
</div>
<div class= "Demo" >
</div>
<div class= "Demo" >
</div>
<div class= "Demo" >
</div>
</body>
Friendly reminder: I only provide a simple demo, in the actual development of the demo in the things still need to modify the changes.
Online Demo: http://demo.jb51.net/js/2012/scrollfixed/
Attached: Demo download