"Floating" divs that scroll with page, with special conditions.

Greetings,

I am working on a project that I think could benefit from the above described feature. It would work a lot like the below examples, but would also behave a little differently. Hopefully it is coded a little more elegantly and semantically too.

Example 1:
http://www.jtricks.com/javascript/na.../floating.html

Example 2:
http://www.echoecho.com/toolfloatinglayer.htm

I am aware of the CSS solution (position: fixed), but that alone will not work for my needs. Maybe it will work in combination with some jQuery, but maybe not.

Take a look at my project here:
http://prototism.co.cc/x/x/tsb/

Don't mind the dummy content, the color schemes, the code, or the possible IE errors; I haven't gotten around to testing it in IE.

Anyway, notice the "navigation" div (About, Pictures, etc).

What I want to do with that is have it:

Initially be in the position it is in when the page loads; but
Move to the top of the viewing port when the viewer scrolls down to the top edge of #navigation; and
Move back to it's natural position when the page is scrolled all the way back to the top.

Basically, I want to have #navigation ALWAYS visible, at the top of the viewing port, except in the conditions described above.

I presume some position: fixed is involved, but the other conditions probably involve JavaScript.

I know it's possible, because a number of years ago, I saw a script that did exactly this. The problem is, and the reason I am here, is that I can not for the life of me find it now.

Thank you,
Matthew

Skimming though the language in this page seems to be what I am looking for, but this is not the original solution I had those many years ago.

http://jqueryfordesigners.com/fixed-floating-elements/

I've also just have started torealize that the wonderful "Drop Down" script I have implemented, might interfere with the script this thread is about, due to the vertical space addition and subtraction.

Well, after some backwards engineering, the solution on that page ultimately didn't work. Basically, his solution works only when the floating element appears after the content it floats over. In my case, #navigation appears before the content I want it to float over. Thus, his script, although relatively simple, is not immediately a solution to my application.

It could probably be tweaked to do so, but I don't have that level of knowledge of JavaScript.

Hopefully another solution is out there.

Here is another potential solution that uses beautiful jQuery:

http://kitchen.net-perspective.com/o...scroll-follow/

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>The Smart Brothers - Acoustic Americana & Folk</title> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <link rel="stylesheet" type="text/css" href="http://prototism.co.cc/x/x/tsb/css/brownred.css" /> <link rel="stylesheet" type="text/css" href="http://prototism.co.cc/x/x/tsb/css/dropdownpanel.css" /> <link rel="stylesheet" type="text/css" href="http://prototism.co.cc/x/x/tsb/css/floatingdiv.css" /> <link rel="stylesheet" type="text/css" href="css/brownred.css" title="brownred" /> <link rel="alternate stylesheet" type="text/css" href="http://prototism.co.cc/x/x/tsb/css/grayred.css" title="grayred" /> <link rel="alternate stylesheet" type="text/css" href="http://prototism.co.cc/x/x/tsb/css/tanbrown.css" title="tanbrown" /> <link rel="alternate stylesheet" type="text/css" href="http://prototism.co.cc/x/x/tsb/css/bluebrown.css" title="bluebrown" /> <link rel="alternate stylesheet" type="text/css" href="http://prototism.co.cc/x/x/tsb/css/whiteblue.css" title="whiteblue" /> <link rel="alternate stylesheet" type="text/css" href="http://prototism.co.cc/x/x/tsb/css/yellowblue.css" title="yellowblue" /> <script type="text/javascript" src="http://prototism.co.cc/x/x/tsb/js/styleswitcher.js"></script> <script type="text/javascript" src="http://prototism.co.cc/x/x/tsb/js/dropdownpanel.js"></script> </head> <body> <div id="mypanel" class="ddpanel"> <div id="mypanelcontent" class="ddpanelcontent" style="position:absolute;top:600px;" > <ul> <li><strong>Scheme :</strong></li> <li onclick="setActiveStyleSheet('brownred'); return false;">Brown/Red</li> <li onclick="setActiveStyleSheet('grayred'); return false;">Gray/Red</li> <li onclick="setActiveStyleSheet('tanbrown'); return false;">Tan/Brown</li> <li onclick="setActiveStyleSheet('bluebrown'); return false;">Blue/Brown</li> <li onclick="setActiveStyleSheet('whiteblue'); return false;">White/Blue</li> <li onclick="setActiveStyleSheet('yellowblue'); return false;">Yellow/Blue</li> <div class="clear"></div> </ul> </div> <div id="mypaneltab" class="ddpaneltab"> <a href="#"><span></span></a> </div> </div> <div id="wrapper"> <div id="header"> <div id="header-inner"> <h1>The Smart Brothers</h1> <a href="index.htm"><img src="http://prototism.co.cc/x/x/tsb/img/logo.png" alt="" /></a> </div> </div> <div id="content"> <div id="content-inner"> <div id="content-inner-inner"> <h2>elis ac lacinia vulputate</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi turpis mi, dapibus nec volutpat eu, sodales non felis. Quisque mollis consequat tellus sed rutrum. Ut non magna nibh, ut gravida nibh. Cras vitae velit leo. Donec fringilla, enim quis porta tincidunt, lectus ligula dignissim ante, id accumsan elit lectus fermentum orci. Mauris vel turpis lorem, at tincidunt erat. Vestibulum nisl massa, volutpat non tincidunt nec, semper et neque. Morbi tristique sodales lectus, ultrices facilisis eros ultricies id. Donec faucibus, felis ac lacinia vulputate, quam leo posuere mi, porta condimentum eros enim hendrerit ipsum. Mauris consectetur dignissim metus et fermentum. Vivamus vitae posuere urna. Nam mollis ultricies libero et sollicitudin. In sem dui, lobortis facilisis commodo in, elementum eu neque. Integer eget interdum quam. Vivamus ac nulla sapien. Donec semper tristique vehicula.</p> <p>Cras hendrerit faucibus posuere. Proin malesuada, eros eu mattis venenatis, nunc nunc rutrum ligula, sed accumsan leo quam a risus. Phasellus urna nisl, commodo sed aliquet eu, ultrices at tortor. Nulla a mi at erat pulvinar ullamcorper id ut erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu massa sed lacus laoreet venenatis ac a sem. Morbi id est et risus pellentesque mattis. Sed semper lobortis nisl sit amet ultricies. Sed pretium sagittis velit tincidunt dignissim. Quisque gravida ultrices sollicitudin.</p> </div> </div> </div> </div> <div id="footer"> <div id="footer-inner"> <ul> <li><strong>Navigation : </strong></li> <li><a href="">About</a></li> <li><a href="">Pictures</a></li> <li><a href="">Schedule</a></li> <li><a href="">Music</a></li> <li><a href="">Merch</a></li> <li><a href="">Contact</a></li> <div class="clear"></div> </ul> <ul> <li><strong>Scheme :</strong></li> <li onclick="setActiveStyleSheet('brownred'); return false;">Brown/Red</li> <li onclick="setActiveStyleSheet('grayred'); return false;">Gray/Red</li> <li onclick="setActiveStyleSheet('tanbrown'); return false;">Tan/Brown</li> <li onclick="setActiveStyleSheet('bluebrown'); return false;">Blue/Brown</li> <li onclick="setActiveStyleSheet('whiteblue'); return false;">White/Blue</li> <li onclick="setActiveStyleSheet('yellowblue'); return false;">Yellow/Blue</li> <div class="clear"></div> </ul> <div> <span>All songs © 2005-2010 Jesse Edwards, Luke Edwards, and/or Michael Reed, unless otherwise noted.</span> <a href="">Full legal disclaimer</a>. </div> <div><a href="http://prototism.co.cc">Design © 2010 MDR</a></div> </div> </div> <div id="navigation" style="position:absolute;left:0px;top:360px;" > <div id="navigation-inner"> <ul> <li><a href="">About</a></li> <li><a href="">Pictures</a></li> <li><a href="">Schedule</a></li> <li><a href="">Music</a></li> <li><a href="">Merch</a></li> <li><a href="">Contact</a></li> <div class="clear"></div> </ul> </div> </div> <script type="text/javascript"> // Animate (11-January-2010) // 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 // see http://www.vicsjavascripts.org.uk/Animate/Animate.htm // // **** Functional Code(1.52K) - 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.neg=srt<0||fin<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(); }, 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); } }, apply:function(){ if (isFinite(this.data[0])){ if (this.data[0]<0&&!this.neg) 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.WebkitOpacity=obj.style.KhtmlOpacity=opc/100-.001; } </script> <script type="text/javascript"> /*<![CDATA[*/ function Float(o){ var obj=document.getElementById(o.ID); this.min=obj.offsetTop; this.oop=new zxcAnimate('top',obj,this.min); this.ms=o.Speed||1000; this.pole=o.PollSpeed||500; this.scroll(); } Float.prototype.scroll=function(){ var oop=this; var top=Math.max(zxcWWHS()[3],this.min); if (top!=this.oop.data[0]){ this.oop.animate(this.oop.data[0],top,this.ms,false,'sin'); } setTimeout(function(){ oop.scroll(); },this.pole); } function zxcWWHS(){ 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]; } new Float({ ID:'navigation', Speed:100, PollSpeed:500 }); /*]]>*/ </script> </body> </html>

That's a great looking script Vic. Is jQuery involved at all? I really appreciate the work you did, but is there a way to make is animate as smoothly as jQuery?

EDIT: I take that back. I like the animation.

Here it is in use:
http://prototism.co.cc/x/x/tsb/index3.php

Notice there is a strange black bar in the middle of the paragraph. Is that caused by the script somehow?

Thanks a lot, regardless!

:p

Alternatively, I am currently recoding the website from scratch. This time, I have coded in the ability for #navigation to float, with position: fixed.

position: fixed works as intended, but to get #navigation to behave as I described above, it probably needs JavaScript.

This recoded version is here:
http://prototism.co.cc/x/x/tsb/index2.php

I have a feeling that the first solution option (http://jqueryfordesigners.com/fixed-floating-elements/), is the answer. I can probably get it to work as how I described it if and when I come to an understanding of how his script works.

I'm thinking that because I recoded/restructured the HTML/CSS of the site, I may have a better chance of getting it to work.