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 2 of 2

Thread: Sticky Nav Bar

  1. #1
    New to the CF scene
    Join Date
    Sep 2012
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Sticky Nav Bar

    Hi,

    I would like this idea: http://www.jay-han.com/tutorial/smart-sticky-nav/

    implemented into my website design: http://d1074293.dotsterhost.com/crea...rk_2012-v2.asp


    I am not sure if it is possible because I do not have divs sitting within divs but rather virtual objects.

    can anyone help me reformat this code? the two divs I need to stay and then stick are portfolio-titles and logo .

    Thanks so much!

    Jenn

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,466
    Thanks
    3
    Thanked 495 Times in 482 Posts
    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[*/
    
    .parent {
      position:absolute;left:0px;top:200px;height:160px;width:800px;border:solid red  1px;
    }
    
    .start {
      position:absolute;left:500px;top:20px;width:300px;height:60px;background-Color:#FFCC66;
    }
    
    .fix {
      position:fixed;left:500px;top:0px;width:300px;height:60px;background-Color:#FFCC66;
    }
    
    /*]]>*/
    </style></head>
    
    <body>
    <div class="parent" > <!-- any or no element -->
     <div id="tst" class="start" ></div>
    </div>
    
    <div style="height:5000px;" ></div>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    
    function zxcFix(o){
     var obj=document.getElementById(o.ID),top=0;
     while(obj){
      top+=obj.offsetTop;
      obj=obj.offsetParent;
     }
     obj=document.getElementById(o.ID);
     this.obj=obj;
     this.scls=obj.className;
     this.fcls=o.FixedClassName;
     this.top=top;
     this.a=document.createElement('A');
     obj.parentNode.insertBefore(this.a,obj);
     this.scroll();
    }
    
    zxcFix.prototype.scroll=function(){
      var o=this,t=window.innerHeight?window.pageYOffset:document.documentElement.clientHeight?document.documentElement.scrollTop:document.body.scrollTop;
      clearTimeout(o.dly);
      if (o.obj.className==o.scls&&t>o.top){
       document.body.appendChild(o.obj);
       o.obj.className=o.fcls;
      }
      if (o.obj.className==o.fcls&&t<o.top){
       o.obj.className=o.scls;
       o.a.parentNode.insertBefore(o.obj,o.a);
      }
      o.dly=setTimeout(function(){ o.scroll(); },100);
     }
    
    
    
    new zxcFix({
     ID:'tst',
     FixedClassName:'fix'
    })
    /*]]>*/
    </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/


  •  

    Tags for this Thread

    Posting Permissions

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