固定标头对齐问题

Question

I'm building a site for a friend, and I've just implemented a fixed header.

http://scsports.comeze.com/blog.php

Problem is when you scroll the header moves to the right by about 7px. I have no idea why, everything I've tried doesn't work. Any ideas would be most appreciated!

HTML+JS:

<div class="navbar">
    <div class="navbar-inner">
    <a class="brand" href="#"><img src="images/logo2.png" class="logo" alt="header    logo"></a>
    <?php include 'socialbtn.php';?>
    <div class="test">
    <ul class="nav">
    <!--<li class="active">-->
    <li><a id="index_link" href="index.php">Home</a></li>
    <li><a id="therapist_link" href="therapist_profile.php">Therapist Profile</a></li>
    <li><a href="services.php">Services & Prices</a></li>
    <li><a href="testimonials.php">Testimonials</a></li>
    <li><a href="contact.php">Contact Me</a></li>
    <li><a href="blog.php">Blog</a></li>
    <li><a href="raceready.php">Race Ready?</a></li>
    <li><a href="treatment.php">What We Treat</a></li>
    <li><a href="expect.php">What To Expect</a></li>

       </ul>
       </div>
</div>
</div>       

<script type="text/javascript">
       jQuery(function(){
        var menuOffset = jQuery('.test')[0].offsetTop;
         jQuery(document).bind('ready scroll',function() {
         var docScroll = jQuery(document).scrollTop();
        if(docScroll >= menuOffset +170) {
       jQuery('.test').addClass('fixed');
         } else {
        jQuery('.test').removeClass('fixed').removeAttr("width");
         }
             });
                }); 

       </script>

CSS:

.test {

} 

.test.fixed{
width: 930px;
position: fixed;
z-index: 9999;
top:0;
display:block;
min-height: 50px;
padding-right: 10px;
padding-left: 10px;
background-color: #2c3e50;
background-image: -moz-linear-gradient(top, #2c3e50, #2c3e50);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#2c3e50), to(#2c3e50));
background-image: -webkit-linear-gradient(top, #2c3e50, #2c3e50);
background-image: -o-linear-gradient(top, #2c3e50, #2c3e50);
background-image: linear-gradient(to bottom, #2c3e50, #2c3e50);
background-repeat: repeat-x;
border: 1px solid #233140;
-webkit-border-radius: 6px;
 -moz-border-radius: 6px;
      border-radius: 6px;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff2c3e50', endColorstr='#ff2c3e50', GradientType=0);
*zoom: 1;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
 -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);

}

I appreciated my code isn't the best and probably some redundant stuff in here but I'm just taking bits and pieces from all over the shop.

Answer 1

The problem with using "fixed" positioning is that it takes the element out of flow. thus it can't be re-positioned relative to its parent because it's as if it didn't have one. If, however, the container is of a fixed, known width, you can use something like:

.test.fixed { left: 50%;
              width: 916px;
              margin-left: -470px;
            }

I have given width 916px because it contains some padding but the container width is 940px. so margin-left is just half the width of the element.

Answer 2

The issue is that your .navbar-inner (should be an ID by the way), adds horizontal padding, which is visible when you make the navbar fixed. The cleanest solution would probably be to move the padding added by that element into a child element which wraps only the elements which you need to add padding to, like so:

<div class='navbar-innner'>
  <div class='navbar-spaced'>
  </div>
</div>

Or add margin-left s to the individual elements that you do need to space out.

Answer 3

From debugger it seems

'navbar-inner' has a padding of 10px on both left and right side. Due to which the 'test' class obtains its position 10px away.

You either need to: - remove the padding from 'navbar-inner' class - or add (-) margin-left to test.fixed and arrange it accordingly