Results 1 to 7 of 7

Thread: sticky AND scrolling divs??

  1. #1
    Join Date
    Jul 2010
    Posts
    27
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default sticky AND scrolling divs??

    Hey guys, I've run into a little dilemma regarding CSS and a sticky div.
    Basically I have a 2 column layout, only the right column (page content) is to be scrollable. The left column needs to be a sticky.

    ...here's where the problem comes in...
    The left column is sometimes longer than the height of the screen, so if I use plain CSS to fix it in position, part of it will never be seen...especially on lower resolution screens.
    I don't want to sticky it to the top or bottom of the screen...the idea here is to "try" and keep it below the header, and always in view.
    HERE IS THE PROBLEM LIVE

    The only solution I can think of is to use some javascript that will "allow" the div to scroll ONLY until the bottom is viewable.
    The div will most probably have a set height...but a height check would be better.

    I'm not clever enough with js to write a function like this, so I need some help. I have searched for this sort of function but came up with nothing, since it's somewhat custom to specific needs....or maybe I just didnt search for the right/correct terms.

    Any help is much welcome, code snippets or points in another direction...or better yet, a workaround solution with only CSS?

  2. #2
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,891
    Thanks
    2
    Thanked 441 Times in 435 Posts

    Default

    Note the additional tags in RED

    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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Royal Resources 2011 | TEMPLATE</title>
    <link href="http://www.hyundaigenerators.com.au/divs/css/template.css" rel="stylesheet" type="text/css" />
    <link href="http://www.hyundaigenerators.com.au/divs/css/content.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">
    /*<![CDATA[*/
    
    function zxcScroll(id){
     var oop=this,a=document.body.getElementsByTagName('A'),a=a[a.length-1],p=document.getElementById(id),obj=p.getElementsByTagName('DIV')[0];
     obj.style.position='relative',
     this.p=p;
     this.a=a;
     this.obj=obj;
     window.onscroll=function(){ oop.scroll(); }
    }
    
    zxcScroll.prototype={
    
     scroll:function(){
      var wwhs=this.wwhs(),ptop=this.pos(this.p)[1],atop=this.pos(this.a)[1]-ptop;
       this.obj.style.top='0px';
      if (wwhs[3]-ptop>1){
       this.obj.style.top=(-this.obj.offsetHeight+wwhs[1]-ptop)*((wwhs[3]-ptop)/(atop-wwhs[1]))+'px';
      }
     },
    
     pos:function(obj){
      var rtn=[0,0];
      while(obj){
       rtn[0]+=obj.offsetLeft;
       rtn[1]+=obj.offsetTop;
       obj=obj.offsetParent;
      }
      return rtn;
     },
    
     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];
     }
    }
    
    /*]]>*/
    </script>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    
    function Init(){
     new zxcScroll('sidebar')
    }
    
    if (window.addEventListener){
     window.addEventListener('load',Init, false);
    }
    else if (window.attachEvent){
     window.attachEvent('onload',Init);
    }
    
    /*]]>*/
    </script>
    
    
    </head>
    
    <body>
    
    
    
    <!-- BOF main content container -->
    <div id="main-width">
    
    <!-- BOF HEADER -->
    <div id="header">
    <div>
    <table width="1165px" cellpadding="0px" cellspacing="0px">
    <tr>
    <td width="380px">&nbsp;</td>
    <td align="center"><img src="http://www.hyundaigenerators.com.au/divs/images/royal_resources_logo.png" border="0px" alt="Royal Resources" /></td>
    <td width="380px" align="right" valign="bottom"><img src="http://www.hyundaigenerators.com.au/divs/images/icon_email.png" border="0px" alt="Email" />&nbsp;&nbsp;<img src="http://www.hyundaigenerators.com.au/divs/images/icon_phone.png" border="0px" alt="Email" /></td>
    </tr>
    </table>
    </div>
    <!-- BOF NAVIGATION -->
    <div id="nav">
    navigation here
    </div>
    <!-- EOF NAVIGATION -->
    
    </div>
    <!-- EOF HEADER -->
    
    
    <div id="main-content">
    
    <!-- BOF SIDEBAR -->
    <div id="sidebar">
    <div>Note the anchor at the bottom of the page
    <br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />111
    <br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />112
    <br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />113
    <br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />111
    <br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />112
    <br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />113
    <br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />111
    <br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />112
    <br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1134
    </div>
    </div>
    <div style="clear:left;"></div>
    <!-- EOF SIDEBAR -->
    
    
    
    <!-- BOF SCROLL CONTENT -->
    
    <div id="scrollable">
    <table width="790px" cellpadding="0px" cellspacing="0px" align="right">
    <tr>
    <td>
    <img src="http://www.hyundaigenerators.com.au/divs/images/banner_place-holder.jpg" border="0px" />
    </td>
    </tr>
    <tr>
    <td>
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    </td>
    </tr>
    
    <tr>
    <td width="790px" height="300px" style="border:1px solid #FFFFFF;">
    FOOTER CONTENT HERE
    </td>
    
    </tr>
    </table>
    </div>
    <!-- EOF SCROLL CONTENT -->
    
    
    
    </div>
    
    
    
    <div style="clear:both;">&nbsp;</div>
    </div>
    <a></a>
    <!-- EOF main content container -->
    </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. The Following User Says Thank You to vwphillips For This Useful Post:

    sketch (09-24-2011)

  4. #3
    Join Date
    Jul 2010
    Posts
    27
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Wink

    Hey vwphillips, that script is realllllly nice. Although not what I was thinking, the possible use for it is great!! I can just imagine emulating some better looking, and 3D floats with it. THNK YOUUU!!

    The reason I can't really use this script for this project, is that, it intelligently scrolls the left div to equal the right div....im sure you already know this, so I wont ramble on about it.
    What I had in mind, is probably much simpler. Could this script be changed to allow normal scrolling of the left div, and when it reaches the bottom to stop it from scrolling?
    The reason is that the left div will often be much smaller than the right div...It seems a little inefficient to have to scroll down the entire length of the content page, just to see, for eg...the remaining 200px of the left div.

    I noticed the empty anchor tag, im assuming you use this as a measurement? To indicate it is the bottom. Could you use something else for measuring? because under that left div, will be a small copyright notice. Could this be used instead?

    I've read a while back about using javascript to change attributes of html tags...do you think this would be a good way to getting the effect im after?
    for eg...when the copyright notice comes on screen (or reaches a specific scroll height), to change the left div attribute to "position:fixed".....and when the user scrolls up, to change it back to "position:absolute".

    ...its times like these I realllly miss flash actionscript...soo much easier to get the desired effects!!

  5. #4
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,891
    Thanks
    2
    Thanked 441 Times in 435 Posts

    Default

    It would be easier to understand your requirement if you posted a link to a page modified to your new layout.
    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. #5
    Join Date
    Jul 2010
    Posts
    27
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Unfortunately I have never seen this done before...to make a sticky div is easy enough, im only in this mess because the div will be populated by more things than originally intended.
    This is why it will stretch longer than the viewable screen area.

    basically I need it to scroll, if the bottom of it is OFF the screen....and stop scrolling when the bottom is on screen.
    Thats why from your code before, I noticed you used that anchor tag as measurement or sorts, I thought maybe using the copyright div (which will be in the final layout) instead of the empty anchor tag.

    Unfortunately Im not completely familiar with what javascript can and can't do....my train of thought is on "maybes"...
    and remembering that javascript is able to change attributes, im wondering if your script can be used to basically turn ON/OFF the scrolling for the div?
    (position:absolute/position:fixed)

    Beyond this, im at a loss for ideas...

  7. #6
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,891
    Thanks
    2
    Thanked 441 Times in 435 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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Royal Resources 2011 | TEMPLATE</title>
    <link href="http://www.hyundaigenerators.com.au/divs/css/template.css" rel="stylesheet" type="text/css" />
    <link href="http://www.hyundaigenerators.com.au/divs/css/content.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    /*<![CDATA[*/
    
    #sidebar {
      overflow:hidden;
    }
    
    /*]]>*/
    </style>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    
    function zxcScroll(id){
     var oop=this,p=document.getElementById(id),a=document.body.getElementsByTagName('A'),a=a[a.length-1],obj=p.getElementsByTagName('DIV')[0];
     obj.style.position='relative',
     this.p=p;
     this.a=a;
     this.obj=obj;
     this.ptop=this.pos(p)[1];
     this.atop=this.pos(a)[1]-this.ptop;
     this.cross=this.atop-p.offsetHeight;
     window.onscroll=function(){ oop.scroll(); }
    }
    
    zxcScroll.prototype={
    
     scroll:function(){
      var wwhs=this.wwhs(),ptop=this.ptop,atop=this.atop,cross=this.cross;
      this.p.style.position=wwhs[3]<cross?'fixed':'absolute';
      this.p.style.top=(wwhs[3]<cross?0:cross)+'px';
      this.obj.style.top='0px';
      if (wwhs[3]-ptop>1){
       this.obj.style.top=(-this.obj.offsetHeight+this.p.offsetHeight)*Math.min((wwhs[3]-ptop)/(atop-wwhs[1]),1)+'px';
      }
     },
    
     pos:function(obj){
      var rtn=[0,0];
      while(obj){
       rtn[0]+=obj.offsetLeft;
       rtn[1]+=obj.offsetTop;
       obj=obj.offsetParent;
      }
      return rtn;
     },
    
     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];
     }
    
    
    }
    
    /*]]>*/
    </script>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    
    function Init(){
     new zxcScroll('sidebar');
    }
    
    if (window.addEventListener){
     window.addEventListener('load',Init, false);
    }
    else if (window.attachEvent){
     window.attachEvent('onload',Init);
    }
    
    /*]]>*/
    </script>
    
    </head>
    
    <body>
    
    
    
    <!-- BOF main content container -->
    <div id="main-width">
    
    <!-- BOF HEADER -->
     <div id="header">
      <div>
       <table width="1165px" cellpadding="0px" cellspacing="0px">
        <tr>
         <td width="380px">&nbsp;</td>
         <td align="center"><img src="http://www.hyundaigenerators.com.au/divs/images/royal_resources_logo.png" border="0px" alt="Royal Resources" /></td>
         <td width="380px" align="right" valign="bottom"><img src="http://www.hyundaigenerators.com.au/divs/images/icon_email.png" border="0px" alt="Email" />&nbsp;&nbsp;<img src="http://www.hyundaigenerators.com.au/divs/images/icon_phone.png" border="0px" alt="Email" /></td>
        </tr>
       </table>
      </div>
    <!-- BOF NAVIGATION -->
      <div id="nav">
    navigation here
      </div>
    <!-- EOF NAVIGATION -->
    
     </div>
    <!-- EOF HEADER -->
    
    
     <div id="main-content">
    
    <!-- BOF SIDEBAR -->
    <div id="sidebar">
    <div>Note the anchor at the bottom of the page
    <br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />111
    <br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />112
    <br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />113
    <br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />111
    <br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />112
    <br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />113
    <br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />111
    <br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />112
    <br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1134
    </div>
    </div>
    <div style="clear:left;"></div>
    <!-- EOF SIDEBAR -->
    
    
    
    <!-- BOF SCROLL CONTENT -->
    
    <div id="scrollable">
    <table width="790px" cellpadding="0px" cellspacing="0px" align="right">
    <tr>
    <td>
    <img src="http://www.hyundaigenerators.com.au/divs/images/banner_place-holder.jpg" border="0px" />
    </td>
    </tr>
    <tr>
    <td>
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    </td>
    </tr>
    
    <tr>
    <td width="790px" height="300px" style="border:1px solid #FFFFFF;">
    FOOTER CONTENT HERE
    </td>
    
    </tr>
    </table>
    </div>
    <!-- EOF SCROLL CONTENT -->
    
    
    
    </div>
    
    
    
    <div >&nbsp;</div>
    </div>
    
    <a>&nbsp;</a>
    <!-- EOF main content container -->
    </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/

  8. #7
    Join Date
    Jul 2010
    Posts
    27
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    thank you soo much Vic, I really appreciate your time and help with this.

    Im trying to understand this function of yours, it seems like when the remainder of the entire page, equals the height of the left div, then scroll....is that somewhat right?

    if so, would it be possible to invert this?
    to make the left div scroll with the top of the right div?? but stop scrolling when the empty anchor is reached?

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
  •