PDA

View Full Version : Floating Menu Bar without slide animation?



eitsuop
07-19-2009, 03: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/MB990LL/A?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/dynamicindex1/staticmenu3.htm ?

Any help would be appreciated!

-- Michele

vwphillips
07-19-2009, 03:04 PM
<!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

<!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, 03:24 PM
Thanks very much! I'll play with this code and see what I can do. (:

eitsuop
07-20-2009, 04: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, 05: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, 05: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, 11: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, 11:56 AM
<!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, 09: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, 05: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

Daganl
08-28-2009, 09:11 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

Yes it would!

mostafa87us
12-19-2009, 01:10 AM
Hello, I want to this inside CMS Like Joomla How I can Do it

I hope find solution for this here

Regards