Floating Menu Bar without slide animation?

**eitsuop** · 07-19-2009, 02:48 AM

I'd like to get a menu bar that starts at a certain location, then as the user scrolls down, goes to another. Hard to describe, but an exact example of what I need is here: http://store.apple.com/us/configure/...mco=NjcxMTQ2Mw

Unfortunately I don't know a lot about JS, and there's three huge, compressed JS files linked to from that page. I have no idea where to start. x__x
I've searched Google for a similar code to no avail. So, I was wondering if there was an (easy) way to do this using the code from here: http://www.dynamicdrive.com/dynamici...taticmenu3.htm ?

Any help would be appreciated!

-- Michele

**vwphillips** · 07-19-2009, 02:04 PM

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[*/
#tst {
  position:absolute;left:100px;top:20px;height:200px;width:100px;background-Color:red;
}

#tst1 {
  position:absolute;left:300px;top:50px;height:200px;width:100px;background-Color:blue;
}
/*]]>*/
</style>

<script  type="text/javascript">
/*<![CDATA[*/
function Scroll(id,ms){
 this.obj=document.getElementById(id);
 this.rstr=zxcWWHS()[3];
 this.lst=zxcWWHS()[3];
 this.tsrt=this.obj.offsetTop;
 this.ms=ms||500;
 this.scroll();
}

Scroll.prototype.scroll=function(){
 var oop=this;
 if (this.lst!=zxcWWHS()[3]){
  this.obj.style.top=zxcWWHS()[3]+this.tsrt+'px';
  this.lst=zxcWWHS()[3];
 }
 setTimeout(function(){ oop.scroll(); },this.ms);
}

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];
}




/*]]>*/
</script>
</head>

<body onload="S1=new Scroll('tst',1000);S1=new Scroll('tst1',500);">
<div id="tst" ></div>
<div id="tst1" ></div>
<div style="height:2000px;" ></div>
</body>

</html>

or

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[*/
.tstp {
  position:absolute;left:100px;top:120px;height:600px;width:120px;background-Color:red;
}

#tst {
  position:absolute;left:10px;top:10px;height:60px;width:100px;background-Color:blue;
}
/*]]>*/
</style>

<script  type="text/javascript">
/*<![CDATA[*/

function Scroll(id,ms){
 this.obj=document.getElementById(id);
 this.lst=zxcWWHS()[3];
 this.tsrt=this.obj.offsetTop;
 this.ms=ms||500;
 this.scroll();
}

Scroll.prototype.scroll=function(){
 var oop=this;
 if (this.lst!=zxcWWHS()[3]){
  this.obj.style.top=Math.max(Math.min(zxcWWHS()[3]+this.tsrt-zxcPos(this.obj.parentNode)[1],this.obj.parentNode.offsetHeight-this.obj.offsetHeight-this.tsrt),this.tsrt)+'px';
  this.lst=zxcWWHS()[3];
 }
 setTimeout(function(){ oop.scroll(); },this.ms);
}

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];
}

function zxcPos(obj){
 var rtn=[obj.offsetLeft,obj.offsetTop];
 while(obj.offsetParent!=null){
  var objp=obj.offsetParent;
  rtn[0]+=objp.offsetLeft;
  rtn[1]+=objp.offsetTop;
  obj=objp;
 }
 return rtn;
}





/*]]>*/
</script>
</head>

<body onload="S1=new Scroll('tst',1000);">
<div class="tstp" >
 <div id="tst" ></div>
</div>
<div style="height:2000px;" ></div>
</body>

</html>

it would take 2K of extra code to add progressive scroll

**eitsuop** · 07-19-2009, 02:24 PM

Thanks very much! I'll play with this code and see what I can do. (:

**eitsuop** · 07-20-2009, 03:10 PM

Hmm, I can't seem to get rid of the jitter...

So how about a different approach? Is it possible to change the div from position:static; to position:fixed; when it comes within 10px of the top of the page?

**vwphillips** · 07-20-2009, 04:43 PM

the 'jitter' is due to the scroll poll duration specified in parameter 1 of function

Scroll('tst',2000);

you said

without slide animation

to the position is updated
every specified in parameter 1 milliseconds if you want it smooth then animation is required

**eitsuop** · 07-20-2009, 04:49 PM

Yes, I did fiddle with the time amount. Actually, I've learned a lot about JS just playing with your code.

**Daganl** · 08-16-2009, 10:14 PM

This is great, however is there anyway to have it like this site?

http://www.nexopia.com

notice how it starts at a position, but after you scroll down, it will follow you, but only after it hits the top of the page..

also; I wouldn't necessarily want a "animation".. but is there a way to have it as fluid as that site has it?

**vwphillips** · 08-17-2009, 10:56 AM

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[*/
#tst {
  position:absolute;left:100px;top:20px;height:200px;width:100px;background-Color:red;
}

#tst1 {
  position:absolute;left:300px;top:50px;height:200px;width:100px;background-Color:blue;
}
/*]]>*/
</style>

<script  type="text/javascript">
/*<![CDATA[*/
function Scroll(id,ms){
 this.obj=document.getElementById(id);
 this.rstr=zxcWWHS()[3];
 this.lst=zxcWWHS()[3];
 this.tsrt=this.obj.offsetTop;
 this.ms=ms||500;
 this.scroll();
}

Scroll.prototype.scroll=function(){
 var oop=this;
 if (this.lst!=zxcWWHS()[3]){
  this.obj.style.top=(zxcWWHS()[3]>this.tsrt?zxcWWHS()[3]:this.tsrt)+'px';
  this.lst=zxcWWHS()[3];
 }
 setTimeout(function(){ oop.scroll(); },this.ms);
}

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];
}




/*]]>*/
</script>
</head>

<body onload="S1=new Scroll('tst',1000);S1=new Scroll('tst1',500);">
<div id="tst" ></div>
<div id="tst1" ></div>
<div style="height:2000px;" ></div>
</body>

</html>

**Daganl** · 08-17-2009, 08:31 PM

awesome, I am guessing there is no way to make it fluid though right? how long would 2k worth of code take to load lol

**opie2k1** · 08-18-2009, 04:40 AM

Hey Vic,

You mentioned that you could add progressive scroll. Would you mind sharing? What I'm looking to do is something like you see here at:

http://www.bulletpr.co.uk/

A very cool site where the menu floats and scrolls the page up and down. I've seen auto-scrolling code and I've seen floating code but I can't seem to make the two jibe.

Any help would be appreciated! Thanks!!
Shawn

Thread: Floating Menu Bar without slide animation?

Thread Tools

Search Thread

Floating Menu Bar without slide animation?

The Following User Says Thank You to vwphillips For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions