SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Addict
    Join Date
    Dec 2006
    Posts
    378
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question switching fixed elements when scrolling

    I can't find an example of what I am looking for but I'm pretty sure I have seen it!

    When you scroll down a page the first heading stays fixed on the screen and when the second heading is scrolled too this then stays on the screen until the third heading is reached and so forth.. Can this be done with jQuery?


    if H2 is top of view port stay fixed until next H2 is top of view port?

  2. #2
    SitePoint Addict
    Join Date
    Dec 2006
    Posts
    378
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    guess it would be better to describe this scrolling effect as trailing headers?

    the first header stays on screen until the next header is reached.. this effect continues until scrolling to the bottom of the page has been reached.. then when scrolling up effect works but in reverse.. Can this be done?

  3. #3
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Portsmouth UK
    Posts
    1,489
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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 {
      position:relative;width:100%;height:50px;background-Color:red;
    }
    
    .padding {
      position:relative;width:100px;height:500px;
    }
    
    /*]]>*/
    </style>
    <script type="text/javascript">
    /*<![CDATA[*/
    
    function zxcFixHeader(cls){
     var oop=this,ary=this.bycls(cls,document),z0=0,fix;
     for (;z0<ary.length;z0++){
      fix=ary[z0].cloneNode(true);
      fix.style.position='fixed';
      fix.style.top='0px';
      fix.style.visibility='hidden';
      document.body.appendChild(fix);
      ary[z0]=[this.pos(ary[z0])[1],fix];
     }
     this.ary=ary;
     setInterval(function(){ oop.fix(); },100);
    }
    
    zxcFixHeader.prototype={
    
     fix:function(){
      var stop=this.stop(),ary=this.ary,z0=0,fix;
      for (;z0<ary.length;z0++){
       ary[z0][1].style.zIndex='100';
       ary[z0][1].style.visibility='hidden';
       if (!fix&&z0>0&&stop>ary[z0-1][0]&&stop<ary[z0][0]){
        fix=ary[z0-1][1];
        fix.style.zIndex='101';
        fix.style.visibility='visible';
       }
      }
     },
    
     stop:function(){
      if (window.innerHeight) return window.pageYOffset;
      else if (document.documentElement.clientHeight) return document.documentElement.scrollTop;
      return document.body.scrollTop;
     },
    
     pos:function(obj){
      var rtn=[0,0];
      while(obj){
       rtn[0]+=obj.offsetLeft;
       rtn[1]+=obj.offsetTop;
       obj=obj.offsetParent;
      }
      return rtn;
     },
    
     bycls:function (nme,el){
      for (var reg=new RegExp('\\b'+nme+'\\b'),els=el.getElementsByTagName('*'),ary=[],z0=0; z0<els.length;z0++){
       if(reg.test(els[z0].className)){
        ary.push(els[z0]);
       }
      }
      return ary;
     }
    
    }
    
    /*]]>*/
    </script>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    
    function Init(){
     new zxcFixHeader('header')
    }
    
    if (window.addEventListener){
     window.addEventListener('load',Init, false);
    }
    else if (window.attachEvent){
     window.attachEvent('onload',Init);
    }
    
    /*]]>*/
    </script>
    
    </head>
    
    <body>
    <div class="header" >Header 1</div>
    <div class="padding" ></div>
    <div class="header" >Header 2</div>
    <div class="padding" ></div>
    <div class="header" >Header 3</div>
    <div class="padding" ></div>
    <div class="header" >Header 4</div>
    <div class="padding" ></div>
    <div class="header" >Header 5</div>
    <div class="padding" ></div>
    </body>
    
    </html>


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
  •