keeping a menubar on top of the site

Martin Hesselbach · Apr 22, 2005

Hi folks,

I was trying to "pin" a menubar to the top of a site.
It should allways stay on its absolute position.
Especially when the user scrolls the page...

I did like this:

<div id="object1" style="position:absolute; visibility:left:50px;
top:50px"> MENU </div>

called from a timer:

document.object1.style.top=50;
OR
window.document.object1.style.top=50;
OR
document.object1.top=50;
OR
window.document.object1.top=50;

none of them worked...
now what?

THX!
M. Hesselbach

PS: It's ok if it runs in firefox, no need for IE support...

David Dorward · Apr 22, 2005

Martin said:
I was trying to "pin" a menubar to the top of a site.
It should allways stay on its absolute position.
Especially when the user scrolls the page...

Is is it that hard for the user to scroll back up?

<div id="object1" style="position:absolute; visibility:left:50px;
top:50px"> MENU </div>

visibility what?

called from a timer:

document.object1.style.top=50;

That should be document.getElementById('object1') and "50px", but won't do
any good since you are just setting it to what it is anyway.

You probably want position: fixed, not absolute. There wouldn't be any need
for JavaScript at all, but IE doesn't support fixed. Google will reveal
JavaScript to fake position: fixed support in Internet Explorer.

Martin Hesselbach · Apr 23, 2005

David said:
Martin Hesselbach wrote:

Is is it that hard for the user to scroll back up?

visibility what?

That should be document.getElementById('object1') and "50px", but won't do
any good since you are just setting it to what it is anyway.

You probably want position: fixed, not absolute. There wouldn't be any need
for JavaScript at all, but IE doesn't support fixed. Google will reveal
JavaScript to fake position: fixed support in Internet Explorer.

Still not working....

this is just for trying to move a DIV:
<html><body>
<div id="object1" style="position:absolute; left:50px; top:50px">
<a href="javascript:document.getElementById('object1').style.top=60px">
Movable Menu</a>
</div></body></html>

is doing nothing in IE or Firefox...
won't work without the ".style" part neither...

this shouldnt be that hart, ey?

thx again

M. Hesselbach

David Dorward · Apr 23, 2005

Martin said:
<div id="object1" style="position:absolute; left:50px; top:50px">

So you're ignoring everything I said about not using absolute and JavaScript
for this then?

<a href="javascript:document.getElementById('object1').style.top=60px">

1: http://jibbering.com/faq/#FAQ4_24

2: Strings, like 60px, must be surrounded by quote marks in JavaScript.

Martin Hesselbach · Apr 23, 2005

David said:
Martin Hesselbach wrote:

So you're ignoring everything I said about not using absolute and JavaScript
for this then?

1: http://jibbering.com/faq/#FAQ4_24

2: Strings, like 60px, must be surrounded by quote marks in JavaScript.

thx

works like this now:

function pinScroll() {
pindelay = setTimeout('pinScroll()',50);
document.getElementById('chordsbar').style.top=(window.pageYOffset+3)+'px';

}

<div id='chordsbar' style='position:absolute'>

its acctually for a lyrics and chords/tabs displaying page...
it scrolls trough the song and the displayed chords you have to play
stay...

M. Hesselbach

Working on mobile css menu with plenty of frustration!	2	Dec 29, 2022
Trouble finding left/top offset position of a DIV when parent DIVhas a border	10	Mar 26, 2008
Position an element dynamically on top of an existing element	14	Feb 5, 2008
A couple of probs with my new site	12	Feb 6, 2012
menu bar and banner responsive issues....any guidance is appreciated!	0	Apr 5, 2016
Changing the content of a layer	2	Sep 19, 2004
A problem with a menu on my site	0	Jun 30, 2003
The devolution of English language and slothful c.l.p behaviors exposed!	50	Jan 24, 2012

keeping a menubar on top of the site

Martin Hesselbach

David Dorward

Martin Hesselbach

David Dorward

Martin Hesselbach

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads