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
Post a Comment