SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Addict
    Join Date
    Jul 2006
    Posts
    379
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Nav stick to browser top, how to?

    Hello, i wonder if anyone can help me with this.

    I am after something like this where the navigation on the left stays attached to the top of the page regardless of a scroll.

    Is there any good tutorials for this around, that someone can point me in the right direction?

    Many thanks

  2. #2
    SitePoint Zealot
    Join Date
    Oct 2004
    Location
    Sydney, Australia
    Posts
    175
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    with css you can use the fixed positioning

    Code:
    <div id="navbar">
    links here
    </div>
    css
    Code:
    #navbar {
    position: fixed;
    }
    however this is not supported in ie 5/6

  3. #3
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,869
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    For IE 5/6 you use position:absolute instead of fixed and then use JavaScript to update the top (and left) to reflect the distance the page has been scrolled.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  4. #4
    SitePoint Addict
    Join Date
    Jul 2006
    Posts
    379
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks guys, much appreciated.

    Is the css option the best one or are there better pure javascript options out there?

    Am basically after the smoothest one.

  5. #5
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,869
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Set position:fixed in the CSS to make it 100&#37; fixed for modern browsers including IE7.

    Add an override to the stylesheet for IE6 to make it use position:absolute instead and then use JavaScript to provide a slightly jerky patch for that browser. Put both inside conditional comments so they only apply to IE6 and earlier.

    Those with JavaScript disabled will then still have the menu fixed except if they are usung IE6 or earlier and the menu will only move slightly when the page is scrolling in IE6 or earlier.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">


Bookmarks

Posting Permissions

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