CSS position:fixed vertically ONLY

D

danazz09

New Member
Hi,

I'm working on a site and am wanting to create a navigation on the left hand side of the screen that scrolls up and down with the page, and then have the main content on the right. I've managed to get this affect happening by putting the navigation in a div called #nav, floating it left and then giving it a position of fixed.

The problem is when viewed in a screen of resolution of 1024 x 768 or smaller, one needs to scroll to the right in order to see all the main content. I have no problem with that. The problem is that the #nav on the left hand side then overlaps the main content as the page is panned to view the rest of the content.

Any way of making the #nav have a position fixed only in the y-axis? I've read that it is not possible with CSS alone, and that I may have to use Javascript. I don't mind, as long as I can get the desired affect.
 
D

DHDdirect

New Member
You will need do it in Javascript but I suggest to avoid the need for horizontal scroll at all cost unless the scrolling was automatic when the mouse is hovered over the left or right hand sides of the pages. Reason being is it pisses most people off because it's harder to scroll horizontally verses vertically.

It's a bit odd to have your website wider than 1024. Is there a specific reason to have it wider?
 
Last edited:
leroy30

leroy30

New Member
I agree with DHDirect - don't make it wider than 1024. If you want it to be wider on a wider screen then make it fluid so it resizes with the browser.

There is still a good proportion of people using 1024 x 768.

You will need to use javascript. Maybe something like...

...
<div id='navbar' style='position:absolute;left:0px;top:0px;width:20px;height:100px;'></div>
</body>
<script type="text/javascript">

window.onscroll = function() {

document.getElementById('navbar').style.top = window.pageYOffset + 'px';

};

</script>

Hope that points you in the right direction :)
 
PixelPusher

PixelPusher

Super Moderator
Staff member
Interesting request...and it may be possible with css only. Here is what I am thinking:

Say your site is 960 pixels wide, and you want your nav element to sit on the left side. Nav width width is 100px (guessing). Create a div that holds your nav element and who's width is 1060px (nav + site). Set the containing div element' position to fixed and then your nav element to absolute. So your html/css would look something like this:

HTML: 
<body>
  <div class="nav-box">
    <ul class="nav">...</ul>
  </div>
  <div>...Rest of site...</div>
</body>
Code: 
div.nav-box {
position:fixed;
top:0;
left:50%;
z-index:7;
margin-left:-530px;  // Keeps the fixed div center on page, assuming your site is centered
width:1060px;
}
ul.nav {
position:absolute;
top:50px;
left:0;
}

DISCLAIMER: I have not tested this, but is looks quite sound :D
 
leroy30

leroy30

New Member
That could probably work. You could possibly just set margin-right:auto and achieve the same effect without actually overlapping the div on the rest of the web page.

Haven't tried this either. Let us know how you go with these ideas.
 
You must log in or register to reply here.
Top