PDA

View Full Version : Floating menu problem



spa
Feb 28th, 2012, 06:01 PM
I am trying to make a floating menu that is wider than the screen. Some of the columns are to the right of the screen and whenever I try to scroll over to the right, the menu is stuck with the position:fixed so I can't see the columns that are off the screen.

<div class="floating-menu" style="position:fixed;top:0px;left:45px">
Menu text
</div>

I want the menu to remain position:fixed for when I scroll up and down, but not when I move left or right because the menu is very wide.

Is there anyway to do this?

Thank you,
-spa

SeattleMicah
Feb 28th, 2012, 09:12 PM
How wide is wide? I would say any menu, including your logo, wider than 1000px at the maxxxxxxxx is way to wide, most people browse at like 800pxish.

With that being said there is no practical (or pleasing way for the user) to scroll right or left to view a fixed element, that I know of.

my preferred method is...


#header {
font-size: 12px;
letter-spacing: 0.15em;
line-height: 24px;
padding: 8px 0;
position: fixed;
text-transform: uppercase;
width: 100%;
z-index: 10;
margin:0 auto;
text-align:center;
}



with a width of 100% so my nav stays centered.

good luck

Lerura
Feb 28th, 2012, 09:16 PM
make your div position:absolute, give it an id,
and run this:
window.onscroll=function(){document.getElementById('YourID').style.top=document.body.scrollTop;}when the document is loaded.

spa
Feb 28th, 2012, 10:05 PM
How wide is wide? I would say any menu, including your logo, wider than 1000px at the maxxxxxxxx is way to wide, most people browse at like 800pxish.

With that being said there is no practical (or pleasing way for the user) to scroll right or left to view a fixed element, that I know of.

my preferred method is...


#header {
font-size: 12px;
letter-spacing: 0.15em;
line-height: 24px;
padding: 8px 0;
position: fixed;
text-transform: uppercase;
width: 100%;
z-index: 10;
margin:0 auto;
text-align:center;
}



with a width of 100% so my nav stays centered.

good luck
It's about 1400 pixels. It's for a wide excel table that contains many columns. Thank you though.

spa
Feb 28th, 2012, 10:13 PM
make your div position:absolute, give it an id,
and run this:
window.onscroll=function(){document.getElementById('YourID').style.top=document.body.scrollTop;};}wh en the document is loaded.

I need to put that inbetween javascript tags, correct?
And where in the html code should it go?

Lerura
Feb 28th, 2012, 10:41 PM
I need to put that inbetween javascript tags, correct?
And where in the html code should it go?

if you use <body onload=""> then paste this into the <head>:

<script>
function InitScroll(){
window.onscroll=function({document.getElementById('YourID').style.top=document.body.scrollTop;}
}
<script>


and then:

<body onload="InitScroll()">

you can also insert it in a jQuery document-ready