#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2007
    Posts
    113
    Rep Power
    0

    Fixed menu bar when scroll


    Hello

    I'm trying to make the menu bar of my website fixed to the very top when a user scrolls down the page.

    I've achieved this, but it's not quite perfect.

    Take a look at this page.

    If you scroll down the page, you'll see the menu bar is fixed to the top of the page. However, scroll slowly and you'll see when the menu becomes fixed, the rest of the page jumps up slightly to fill the gap.

    Can anyone figure out how to stop the page jumping up and create a smoother effect?

    The code I'm using below:

    CSS:
    Code:
    /* Header Structure
    /*-----------------------------------------------------------------------------------*/
    #header{width:100%; height:65px; background:url(../images/trans_black.png) repeat; margin:0 0 37px 0;}
    .logo{float:left;padding:0px; margin:0px;}
    img.logo_image{ float:left; margin:9px 0 0 15px;}
    .logo h1 { float:left; line-height:65px;}
    .logo h1 a{font-size:30px; color:#fff; padding:0 0 0 15px;}
    
    /* Menu Structure
    /*-----------------------------------------------------------------------------------*/
    .show_menu{ display:none;}
    .hide_menu{ display:none;}
    .menu{float:right; padding:22px 0 0 0;}
    .f-nav{ z-index: 9999; position: fixed; top: 0; width: 1000px; margin: 0 auto;}
    ul#main_menu {list-style:none; margin:0; padding:0px;}
    ul#main_menu * {margin:0; padding:0;}
    ul#main_menu li {position:relative; float:left; padding:0 40px 0 0px; height:42px;}
    ul#main_menu li a{font-family: 'Terminal Dosis', sans-serif;color:#fff; font-size:16px;}
    ul#main_menu li a:hover{color:#dd3134;}
    ul#main_menu li.selected a{color:#dd3134;}
    
    ul#main_menu ul {position:absolute; top:42px; left:-10px; background:#000; display:none; opacity:0; list-style:none;}
    ul#main_menu ul li {position:relative; width:140px; margin:0; padding:0px;}
    ul#main_menu ul li a {display:block; padding:10px 20px 10px 20px; font-size:14px;}
    ul#main_menu li.selected ul li a{ color:#FFFFFF;}
    ul#main_menu li.selected ul li a:hover{ color:#dd3134;}
    ul#main_menu ul li a:hover {background-color:#f0f0f0;}
    jQuery:
    Code:
    var nav = $('.menu_wrap');
        
        $(window).scroll(function () {
            if ($(this).scrollTop() > 35) {
                nav.addClass("f-nav");
            } else {
                nav.removeClass("f-nav");
            }
        });

    HTML:
    Code:
    <div class="menu_wrap">
      <div id="header">
      	<div class="logo"><a href="index.html"><img src="images/logo.png" alt="logo" title="logo" class="logo_image" /></a><h1><a href="index.html">My Fit Finder</a></h1></div>
        
        <?php require_once("includes/menu.inc.php"); ?>
         
      </div><!-- End of Header-->
    </div>
    I'd appreciate any help.
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Dec 2003
    Posts
    709
    Rep Power
    441
    The #header position plus its bottom margin is pushing .page_header down. When you switch to fixed positioning, removing it from "the flow", those items no longer push .page_header, which makes it jump up.

    What you should do instead is take the header out of "the flow" from the start. Add position: absolute to #header. This will make it collapse in width, but you can add width: 100% to make it stretch across. This will make it stretch too far, but you can add position: relative to #main_container to fix that. Now you remove the bottom margin from #header because it's no longer needed, and add a top margin to .page_header, which is probably going to be about 100px, (37px+header height, whatever that is).

    So add:

    Code:
    #main_container {position: relative}
    #header {position: absolute; width: 100%}
    .page_header {margin-top: 100px}

    Comments on this post

    • stevenatherton4 agrees
    • Kravvitz agrees
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2007
    Posts
    113
    Rep Power
    0
    Originally Posted by rdoyle720
    The #header position plus its bottom margin is pushing .page_header down. When you switch to fixed positioning, removing it from "the flow", those items no longer push .page_header, which makes it jump up.

    What you should do instead is take the header out of "the flow" from the start. Add position: absolute to #header. This will make it collapse in width, but you can add width: 100% to make it stretch across. This will make it stretch too far, but you can add position: relative to #main_container to fix that. Now you remove the bottom margin from #header because it's no longer needed, and add a top margin to .page_header, which is probably going to be about 100px, (37px+header height, whatever that is).

    So add:

    Code:
    #main_container {position: relative}
    #header {position: absolute; width: 100%}
    .page_header {margin-top: 100px}
    Thanks for the quick reply. I made the changes you suggested and it worked perfectly. However, I've noticed it's made the menu disappear completely on my main page

    Obviously because the pages are set up slightly differently.

    I'll try and figure out how the main page should be set up based on what you've already given me.

    Thanks for your help.
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2007
    Posts
    113
    Rep Power
    0
    Simple as adding the top margin to another class.

    Thanks again.
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Dec 2003
    Posts
    709
    Rep Power
    441
    .slider_container would also need the top margin.

IMN logo majestic logo threadwatch logo seochat tools logo