jquery - Issue with a fixed header allignment -


i'm building site friend, , i've implemented fixed header.

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

problem when scroll header moves right 7px. have no idea why, i've tried doesn't work. ideas 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 treat</a></li>     <li><a href="expect.php">what 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 code isn't best , redundant stuff in here i'm taking bits , pieces on shop.

regards,

nick

the problem using "fixed" positioning takes element out of flow. can't re-positioned relative parent because it's if didn't have one. if, however, container of fixed, known width, can use like:

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

i have given width 916px because contains padding container width 940px. margin-left half width of element.


Comments

Popular posts from this blog

curl - PHP fsockopen help required -

HTTP/1.0 407 Proxy Authentication Required PHP -

c# - Resource not found error -