Results 1 to 6 of 6

Thread: Positioned div that remains onscreen once element hits top of screen

  1. #1
    Join Date
    Apr 2009
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Positioned div that remains onscreen once element hits top of screen

    Please, pardon the long title.

    Now, I am (or was) very sure that such a script exist here but for the life of me I can not seem to find it a second time, despite having gone through section by section.

    What I saw and am looking for was a script that allowed a div (or at least I think it was a div) that held it's usual position in the flow of a page, then as the user scrolled down the div would hit the top of the browser and remain on screen as the user kept scrolling down.

    I would greatly appreciate it if any of you could point me to it...and yes, I do not mind being reminded of just how noobish this request is. :P
    Last edited by Harvengure; 12-24-2009 at 06:44 AM. Reason: Resolved

  2. #2
    Join Date
    Mar 2006
    Location
    Illinois, USA
    Posts
    12,162
    Thanks
    263
    Thanked 690 Times in 678 Posts

    Default

    Google "sticky div". There is at least one script on dynamic drive as well: http://www.dynamicdrive.com/dynamici...stickynote.htm
    Daniel - Freelance Web Design | <?php?> | <html>| espa˝ol | Deutsch | italiano | portuguŕs | catalÓ | un peu de franšais | some knowledge of several other languages: I can sometimes help translate here on DD | Linguistics Forum

  3. #3
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,799
    Thanks
    2
    Thanked 420 Times in 414 Posts

    Default

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <style type="text/css">
    /*<![CDATA[*/
    .tst {
      width:200px;height:100px;background-Color:red;
    }
    
    /*]]>*/
    </style></head>
    
    <body>
    <br />
    <br />
    <br />
    <div class="tst"  ></div>
    
    <div style="height:2000px;" ></div>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    
    function ScrollBox(o){
     this.box=zxcByClassName(o.cls)[0];
     this.clone=this.box.cloneNode(true);
     this.clone.style.position='absolute';
     this.clone.style.zIndex='101';
     this.os=o.offset||5;
     document.body.appendChild(this.clone);
     this.Scroll();
    }
    
    ScrollBox.prototype.Scroll=function(){
     var oop=this,p=zxcPos(this.box),top=zxcWST();
     this.clone.style.left=p[0]+'px';
     this.clone.style.top=top+this.os+'px';
     this.clone.style.visibility=top>p[1]?'visible':'hidden';
     this.box.style.visibility=top>p[1]?'hidden':'visible';
     this.to=setTimeout(function(){ oop.Scroll(); },50);
    }
    
    function zxcPos(obj){
     var rtn=[0,0];
     while(obj){
      rtn[0]+=obj.offsetLeft;
      rtn[1]+=obj.offsetTop;
      obj=obj.offsetParent;
     }
     return rtn;
    }
    
    
    function zxcByClassName(nme,el,tag){
     if (typeof(el)=='string') el=document.getElementById(el);
     el=el||document;
     for (var tag=tag||'*',reg=new RegExp('\\b'+nme+'\\b'),els=el.getElementsByTagName(tag),ary=[],z0=0; z0<els.length;z0++){
      if(reg.test(els[z0].className)) ary.push(els[z0]);
     }
     return ary;
    }
    
    function zxcWST(){
     if (window.innerHeight) return window.pageYOffset;
     else if (document.documentElement.clientHeight) return document.documentElement.scrollTop;
     return document.body.scrollTop;
    }
    
    new ScrollBox({
     cls:'tst',
     offset:10
    });
    
    /*]]>*/
    </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/

  4. #4
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,799
    Thanks
    2
    Thanked 420 Times in 414 Posts

    Default

    or
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <style type="text/css">
    /*<![CDATA[*/
    .tst {
      width:200px;height:100px;background-Color:red;
    }
    
    /*]]>*/
    </style></head>
    
    <body>
    <br />
    <br />
    <br />
    <center><div class="tst"  ></div>
    </center>
    <div style="height:2000px;" ></div>
    
    <script type="text/javascript">
    // Animate (28-November-2009)
    // by Vic Phillips http://www.vicsjavascripts.org.uk
    
    // To progressively change the Left, Top, Width, Height or Opacity of an element over a specified period of time.
    // With the ability to scale the effect time on specified minimum/maximum values
    // and with three types of progression 'sin' and 'cos' and liner.
    
    // **** Application Notes
    
    // **** The HTML Code
    //
    // when moving an element the inline or class rule style position of the element should be assigned as
    // 'position:relative;' or 'position:absolute;'
    //
    // The element would normally be assigned a unique ID name.
    //
    
    // **** Initialising the Script.
    //
    // The script is initialised by assigning an instance of the script to a variable.
    // e.g A = new zxcAnimate('left','id1')
    // where:
    //  A           = a global variable                                                               (variable)
    //  parameter 0 = the mode(see Note 1).                                                           (string)
    //  parameter 1 = the unique ID name or element object.                                           (string or element object)
    //  parameter 1 = the initial value.                                                              (digits, default = 0)
    
    // **** Executing the Effect
    //
    // The effect is executed by an event call to function 'A.animate(10,800 ,5000,[10,800]);'
    // where:
    //  A           = the global referencing the script instance.                                 (variable)
    //  parameter 0 = the start value.                                                            (digits, for opacity minimum 0, maximum 100)
    //  parameter 1 = the finish value.                                                           (digits, for opacity minimum 0, maximum 100)
    //  parameter 2 =  period of time between the start and finish of the effect in milliseconds. (digits or defaults to previous or 0(on first call) milliSeconds)
    //  parameter 3 = (optional) to scale the effect time on a specified minimum/maximum.         (array, see Note 3)
    //                 field 0 the minimum value. (digits)
    //                 field 1 the maximum value. (digits)
    //  parameter 3 = (optional) the type of progression, 'sin', 'cos' or 'liner'.                (string, default = 'liner')
    //                 'sin' progression starts fast and ends slow.
    //                 'cos' progression starts slow and ends fast.
    //
    //  Note 1:  Examples modes: 'left', 'top', 'width', 'height', 'opacity.
    //  Note 2:  The default units(excepting opacity) are 'px'.
    //           For hyphenated modes, the first character after the hyphen must be upper case, all others lower case.
    //  Note 3:  The scale is of particular use when re-calling the effect
    //           in mid progression to retain an constant rate of progression.
    //  Note 4:  The current effect value is recorded in A.data[0].
    //  Note 5:  A function may be called on completion of the effect by assigning the function
    //           to the animator intance property .Complete.
    //           e.g. [instance].Complete=function(){ alert(this.data[0]); };
    //
    
    
    
    // **** Functional Code(1.58K) - NO NEED to Change
    
    function zxcAnimate(mde,obj,srt){
     this.to=null;
     this.obj=typeof(obj)=='object'?obj:document.getElementById(obj);
     this.mde=mde.replace(/\W/g,'');
     this.data=[srt||0];
     return this;
    }
    
    zxcAnimate.prototype.animate=function(srt,fin,ms,scale,c){
     clearTimeout(this.to);
     this.time=ms||this.time||0;
     this.data=[srt,srt,fin];
     this.mS=this.time*(!scale?1:Math.abs((fin-srt)/(scale[1]-scale[0])));
     this.c=typeof(c)=='string'?c.charAt(0).toLowerCase():this.c?this.c:'';
     this.inc=Math.PI/(2*this.mS);
     this.srttime=new Date().getTime();
     this.cng();
    }
    
    zxcAnimate.prototype.cng=function(){
     var oop=this,ms=new Date().getTime()-this.srttime;
     this.data[0]=(this.c=='s')?(this.data[2]-this.data[1])*Math.sin(this.inc*ms)+this.data[1]:(this.c=='c')?this.data[2]-(this.data[2]-this.data[1])*Math.cos(this.inc*ms):(this.data[2]-this.data[1])/this.mS*ms+this.data[1];
     this.apply();
     if (ms<this.mS) this.to=setTimeout(function(){oop.cng()},10);
     else {
      this.data[0]=this.data[2];
      this.apply();
      if (this.Complete) this.Complete(this);
     }
    }
    
    zxcAnimate.prototype.apply=function(){
     if (isFinite(this.data[0])){
      if (this.data[0]<0&&(this.mde=='left'||this.mde=='top')) this.data[0]=0;
      if (this.mde!='opacity') this.obj.style[this.mde]=Math.floor(this.data[0])+'px';
      else zxcOpacity(this.obj,this.data[0]);
     }
    }
    
    function zxcOpacity(obj,opc){
     if (opc<0||opc>100) return;
     obj.style.filter='alpha(opacity='+opc+')';
     obj.style.opacity=obj.style.MozOpacity=obj.style.KhtmlOpacity=opc/100-.001;
    }
    
    
    </script>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    
    function ScrollBox(o){
     this.box=zxcByClassName(o.cls)[0];
     this.clone=this.box.cloneNode(true);
     this.clone.style.position='absolute';
     this.clone.style.zIndex='101';
     this.os=o.offset||5;
     this.ms=o.ms||1000;
     this.oop=new zxcAnimate('top',this.clone,this.os);
     this.scroll=0;
     document.body.appendChild(this.clone);
     this.Scroll();
    }
    
    ScrollBox.prototype.Scroll=function(){
     var oop=this,p=zxcPos(this.box),top=zxcWST();
     if (top==this.scroll&&this.oop.data[2]!=top+this.os){
      this.clone.style.left=p[0]+'px';
      this.clone.style.visibility=top>p[1]?'visible':'hidden';
      this.box.style.visibility=top>p[1]?'hidden':'visible';
      this.oop.animate(this.oop.data[0],top+this.os,this.ms,[0,500],'sin');
     }
     this.scroll=top;
     this.to=setTimeout(function(){ oop.Scroll(); },200);
    }
    
    function zxcPos(obj){
     var rtn=[0,0];
     while(obj){
      rtn[0]+=obj.offsetLeft;
      rtn[1]+=obj.offsetTop;
      obj=obj.offsetParent;
     }
     return rtn;
    }
    
    
    function zxcByClassName(nme,el,tag){
     if (typeof(el)=='string') el=document.getElementById(el);
     el=el||document;
     for (var tag=tag||'*',reg=new RegExp('\\b'+nme+'\\b'),els=el.getElementsByTagName(tag),ary=[],z0=0; z0<els.length;z0++){
      if(reg.test(els[z0].className)) ary.push(els[z0]);
     }
     return ary;
    }
    
    function zxcWST(){
     if (window.innerHeight) return window.pageYOffset;
     else if (document.documentElement.clientHeight) return document.documentElement.scrollTop;
     return document.body.scrollTop;
    }
    
    new ScrollBox({
     cls:'tst',
     offset:10,
     ms:500
    });
    
    /*]]>*/
    </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/

  5. #5
    Join Date
    Apr 2009
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Haha! The first one is almost exactly what I need. Actually it's exactly what I need, it's just not as smooth as the one I thought I found on this site (which was not the link you posted) but no matter. It does what I want.

    Thank you very much!

  6. #6
    Join Date
    Mar 2006
    Location
    Illinois, USA
    Posts
    12,162
    Thanks
    263
    Thanked 690 Times in 678 Posts

    Default

    Some are smoother than others. If you look through a variety of scripts, you may find one you like more than the others.
    Daniel - Freelance Web Design | <?php?> | <html>| espa˝ol | Deutsch | italiano | portuguŕs | catalÓ | un peu de franšais | some knowledge of several other languages: I can sometimes help translate here on DD | Linguistics Forum

Bookmarks

Posting Permissions

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