Hello, how can I have a div appear only when scrolling between two points on a page? Say if I wanted the div to slide up from the bottom, after scrolling down 300px from top of page, and then have the div slide back out after scrolling past 1000px from top?
I'm not sure what you want can be done with JS
but just in case, can you show an picture example of what it is that you are trying to accomplish
or a link to a page that does what you want to do?
Use a scroll event handler that will track the current scroll positon & trigger ur "back to top" panel
Code:
<script type="text/javascript">
function trackCurrentScroll ()
{
var div = document.getElementById ("scrollDiv");
if(div.scrollTop.equals(“1000px”) || div.scrollTop.equals(“300px”)
//unhide ur back to top division
Else
//hide ur back to top
}
</script>
<body>
<div id="scrollDiv" style="overflow:auto;" onscroll=" trackCurrentScroll()">
//ur main division with scroll
</div>
</body>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
</head>
<body>
<div style="height:2000px;" ></div>
<div id="tst" style="position:absolute;z-Index:101;left:300px;top:-300px;height:100px;width:100px;background-Color:red;" > </div>
<script type="text/javascript">
<!--
var zxcFix={
init:function(o){
var div=document.getElementById(o.ID),ms=o.AnimateDuration,obj;
obj={
obj:div,
mm:o.ShowHide,
mve:0,
fix:typeof(o.Fix)=='number'?o.Fix:0,
ms:typeof(ms)=='number'?ms:1000
}
this.addevt(window,'scroll','scroll',obj);
},
scroll:function(o){
var s=this.wwhs();
if (s[3]<o.mm[0]&&o.mve!=0){
this.animate(o,s[3]+o.fix,s[1]+s[3],new Date(),o.ms,true);
o.mve=0;
}
if (s[3]>o.mm[0]&&s[3]<o.mm[1]&&(o.mve==0||o.mve==2)){
o.mve=1;
o.obj.style.position='absolute';
o.obj.style.visibility='visible';
this.animate(o,s[1]+s[3],s[3]+o.fix,new Date(),o.ms,false);
}
if (s[3]>o.mm[1]&&o.mve==1){
o.mve=2;
o.obj.style.position='absolute';
o.obj.style.top=s[3]+'px';
this.animate(o,s[3]+o.fix,s[1]+s[3],new Date(),o.ms,true);
}
},
animate:function(o,f,t,srt,mS,hide){
var oop=this,ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f;
if (isFinite(now)){
o.now=now;
o.obj.style.top=now+'px';
}
if (ms<mS){
o.dly=setTimeout(function(){ oop.animate(o,f,t,srt,mS,hide); },10);
}
else {
o.now=t;
if (f>t){
o.obj.style.top=o.fix+'px';
}
o.obj.style.position='fixed';
}
},
wwhs:function(){
if (window.innerHeight) return [window.innerWidth-10,window.innerHeight-10,window.pageXOffset,window.pageYOffset];
else if (document.documentElement.clientHeight) return [document.documentElement.clientWidth-10,document.documentElement.clientHeight-10,document.documentElement.scrollLeft,document.documentElement.scrollTop];
return [document.body.clientWidth,document.body.clientHeight,document.body.scrollLeft,document.body.scrollTop];
},
addevt:function(o,t,f,p){
var oop=this;
if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](p);}, false);
else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](p); });
}
}
zxcFix.init({
ID:'tst', // the unique ID name of the DIV. (string)
ShowHide:[300,1000], // the minimum and maximum trigger positions. (array)
AnimateDuration:1000, // the animation duration in milli seconds. (number, default = 1000)
Fix:100 // the div fixed position from the window top position. (number, default = 0)
});
//-->
</script></body>
</html>
I'm not sure what you want can be done with JS
but just in case, can you show an picture example of what it is that you are trying to accomplish
or a link to a page that does what you want to do?
Looks like I learn something new each day. Can't wait until tomorrow!
Before you post, read our: 
