Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    Regular Coder
    Join Date
    Nov 2011
    Posts
    154
    Thanks
    5
    Thanked 0 Times in 0 Posts

    div appear between two points?

    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?

  • #2
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,091
    Thanks
    38
    Thanked 498 Times in 492 Posts
    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?

  • #3
    Regular Coder
    Join Date
    Nov 2011
    Posts
    154
    Thanks
    5
    Thanked 0 Times in 0 Posts
    thanks
    Last edited by resin; 06-01-2012 at 01:11 PM.

  • #4
    New Coder
    Join Date
    May 2012
    Posts
    25
    Thanks
    0
    Thanked 1 Time in 1 Post
    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>

  • #5
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,518
    Thanks
    3
    Thanked 506 Times in 493 Posts
    Code:
    <!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>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #6
    Regular Coder
    Join Date
    Nov 2011
    Posts
    154
    Thanks
    5
    Thanked 0 Times in 0 Posts
    this is excellent! how do i stop it from appearing on page load? I don't want it to appear until I scroll down.

  • #7
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,091
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Smile

    Quote Originally Posted by jmrker View Post
    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!

  • #8
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,518
    Thanks
    3
    Thanked 506 Times in 493 Posts
    how do i stop it from appearing on page load
    in my example the div has an initial top position of - 300px so it is not visible until the page scrolls.
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •