Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Regular Coder
    Join Date
    Oct 2009
    Posts
    189
    Thanks
    38
    Thanked 3 Times in 3 Posts

    get part of screen to remain fixed and visible when scrolling

    Hey all,

    I looked at this webpage:
    http://confluence.atlassian.com/disp...+Documentation
    And the left portion of the page always remains fixed and visible, even when you can scroll the right poartion of the screen. Now they are in two different divs which partly make it possible.
    But I'm not sure what they're doing to get the left portiion to always remain visible and fixed.

    Thanks for any response.

  • #2
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    They used a fixed position in the div that the left portion is contained in.

    If you have a div named leftSidebar then you would style it like so:

    #leftSidebar {float: left;
    position: fixed;
    }

    You can set margins relative to where you want it to remain as well. If you want a menu thats in the sidebar to be 50 px from the top, then setting it 50px with fixed position and it will always be 50px down from the top.

  • Users who have thanked teedoff for this post:

    johnmerlino (10-08-2010)

  • #3
    Regular Coder
    Join Date
    Oct 2009
    Posts
    189
    Thanks
    38
    Thanked 3 Times in 3 Posts
    In addition to that, I had to give the div next to it "float: right". Otherwise, "float: left" would cause it to collapse into the floating left div with position fixed.

  • #4
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Quote Originally Posted by johnmerlino View Post
    In addition to that, I had to give the div next to it "float: right". Otherwise, "float: left" would cause it to collapse into the floating left div with position fixed.

    So you got it working correctly? Great!


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •