[英]Issue with a fixed header alignment
我正在为一个朋友建立一个网站,并且我刚刚实现了一个固定的标题。
http://scsports.comeze.com/blog.php
问题是,当您滚动标题时,标题会向右移动约7px。 我不知道为什么,我尝试过的所有方法都不起作用。 任何想法将不胜感激!
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);
}
我很欣赏我的代码不是最好的,这里可能有一些多余的东西,但是我只是从商店的各个角落中获取零碎的东西。
使用“固定”定位的问题在于,它会使元素脱离流动。 因此无法相对于其父对象重新定位,因为好像没有父对象一样。 但是,如果容器的宽度是已知的固定宽度,则可以使用以下方法:
.test.fixed { left: 50%;
width: 916px;
margin-left: -470px;
}
我给定宽度916px,因为它包含一些填充,但是容器的宽度为940px。 因此,左边距仅是元素宽度的一半。
问题是您的.navbar-inner
(应该是一个ID)添加了水平填充,当您固定导航条时,该填充是可见的。 最干净的解决方案可能是将该元素添加的填充移动到子元素中,该子元素仅包装需要添加填充的元素,如下所示:
<div class='navbar-innner'>
<div class='navbar-spaced'>
</div>
</div>
或者增加margin-left
s到你确实需要的空间出来的单个元素。
从调试器看来
“ navbar-inner”左侧和右侧的填充均为10px。 由于这个原因,“测试”类获得了距其10px的位置。
您需要:-从“ navbar-inner”类中删除填充物-或在test.fixed中添加(-)左边距,并进行相应安排
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.