CSS position:fixed vertically ONLY

Discussion in 'Web Design' started by danazz09, Mar 15, 2011.

to remove all ads.
  1. danazz09

    danazz09 New Member

    Messages:
    1
    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.
     
  2. DHDdirect

    DHDdirect New Member

    Messages:
    383
    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: Mar 15, 2011
  3. leroy30

    leroy30 New Member

    Messages:
    485
    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 :)
     
  4. PixelPusher

    PixelPusher Super Moderator Staff Member

    Messages:
    1,077
    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
     
  5. leroy30

    leroy30 New Member

    Messages:
    485
    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.
     

Share This Page