Results 1 to 4 of 4

Thread: On scroll header collapse to smaller sticky header

  1. #1
    Join Date
    Jan 2010
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default On scroll header collapse to smaller sticky header

    Hi, I'm presuming this is done using Javascript, forgive me if I have posted this in the wrong section.

    Trying to create a header that collapses to a smaller, sticky version as soon as the user scrolls past the bottom of the main header.

    For a better understanding of what I am trying to achieve see an example on the TechCrunch redesign

    Any help on this or a point in the right direction would be greatly appreciated.

    Thanks!

  2. #2
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,772
    Thanks
    2
    Thanked 410 Times in 405 Posts

    Default

    It is CSS

    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[*/
    .header {
      left:0px;top:0px;width:100%;height:280px;
    }
    
    .float {
      position:fixed;z-Index:1000;left:0px;top:0px;width:100%;height:50px;
    }
    
    /*]]>*/
    </style></head>
    
    <body>
    <img class="header" src="http://www.vicsjavascripts.org.uk/StdImages/Two.gif" />
    
    <div style="height:2000px;" ></div>
    
    <img class="float" src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" />
    
    
    </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/

  3. #3
    Join Date
    Jan 2010
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Hi Vic,

    Thanks for that. I'm not quite sure you understand what I am after though. The script you have written above applies a fixed header.

    However I am looking to create header that is say 100px in height, when a user scrolls down as soon as that 100px has been reached the header then converts into a smaller header (say 35px) and remains sticky to the top of the page until the user return back to the very start.

    The best example of this can be seen at giglocator.com

    Thanks again for your help,

  4. #4
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,772
    Thanks
    2
    Thanked 410 Times in 405 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[*/
    .header {
      left:0px;top:0px;width:100%;height:280px;
    }
    
    #float {
      position:absolute;z-Index:1000;left:0px;top:100px;width:100%;height:100px;border:solid red 1px;
    }
    
    #float IMG{
      position:absolute;z-Index:1000;left:0px;top:0px;width:100%;height:100%;
    }
    
    /*]]>*/
    </style></head>
    
    <body>
    
    <div style="height:2000px;" ></div>
    
    <div id="float">
     <img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" />
    </div>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    
    function Float(o){
     var oop=this,obj=document.getElementById(o.ID);
     this.obj=obj;
     this.top=obj.offsetTop;
     this.max=obj.offsetHeight;
     this.min=o.MimimumSize||this.max;
     setInterval(function(){ oop.fix(); },50);
    }
    
    Float.prototype={
    
     fix:function(){
      var wwhs=this.wwhs();
      this.obj.style.top=(wwhs[3]>this.top?0:this.top)+'px';
      this.obj.style.height=(wwhs[3]>this.top?this.min:this.max)+'px';
      this.obj.style.width=wwhs[0]+'px';
      this.obj.style.position=wwhs[3]>this.top?'fixed':'absolute';
     },
    
     wwhs:function(){
      if (window.innerHeight) return [window.innerWidth-5,window.innerHeight-5,window.pageXOffset,window.pageYOffset];
      else if (document.documentElement.clientHeight) return [document.documentElement.clientWidth-5,document.documentElement.clientHeight-5,document.documentElement.scrollLeft,document.documentElement.scrollTop];
      return [document.body.clientWidth,document.body.clientHeight,document.body.scrollLeft,document.body.scrollTop];
     }
    
    
    }
    
    new Float({
     ID:'float',
     MimimumSize:35
    });
    
    /*]]>*/
    </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/

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
  •