CSS position:fixed vertically ONLY

danazz09 · 03-15-2011, 06:02 AM

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.

DHDdirect · 03-15-2011, 06:26 AM

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?

leroy30 · 03-16-2011, 02:41 AM

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:20 px;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 · 03-16-2011, 03:53 PM

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 Code:

<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

leroy30 · 03-16-2011, 07:47 PM

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.

03-15-2011, 06:02 AM	#1
danazz09 New Member Join Date: Mar 2011 Posts: 1	CSS position:fixed vertically ONLY 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.

03-15-2011, 06:26 AM	#2
DHDdirect Gold Member Join Date: Feb 2011 Location: Australia Posts: 369	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? __________________ Jason H. DHDdirect.com Domains - Hosting - Design Last edited by DHDdirect; 03-15-2011 at 06:28 AM.

03-16-2011, 02:41 AM	#3
leroy30 Gold Member Join Date: Mar 2010 Location: Auckland, New Zealand Posts: 326	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:20 px;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 __________________ DVI web design \| Portable Time Clock

03-16-2011, 03:53 PM	#4
PixelPusher Super Moderator Join Date: Oct 2008 Location: Arizona, USA Posts: 1,053	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 Code: <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 __________________ John Darling Graphic / Web Designer SmarterTools Inc. (877) 357-6278 www.smartertools.com

03-16-2011, 07:47 PM	#5
leroy30 Gold Member Join Date: Mar 2010 Location: Auckland, New Zealand Posts: 326	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. __________________ DVI web design \| Portable Time Clock

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode