我在顶部导航栏中使用固定定位时遇到问题。我已经删除了我尝试过的代码并将其恢复正常,因此也许有人可以看到为什么我在尝试修复位置时会遇到这些格式问题。
#main-header {
/*background:url(images/house.jpg) no-repeat center top;*/
height:734px;
border-bottom:10px solid #162b4b;
}
.epicFullscreen {max-height:735px !important}
.epicFullscreen img {min-height:735px !important}
#top-bar {background: #162b4b; height:60px; margin-top:-98px; margin-bottom:70px}
#top-bar nav {padding-left:260px; padding-top:10px; color:#9297a2; width:75%; float:left}
#top-bar nav a {color:#9297a2; margin-right:30px; text-decoration:none}
#phone {float:right; color:white; padding-top:5px; position:relative; right:90px; top:-15px}
#phone a span {font-size:30px; font-weight:bold; color:#93da04; !important; cursor: default}
#phone > span {font-size:18px; font-weight:bold; color:#white; !important; cursor: default}
a[href^=tell] {color:inherit}
#logo {
width:233px;
height:98px;
background:white;
position:relative;
-webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.7);
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.7);
display:block;
cursor:pointer;
}
#logo img {position:absolute; top:10px; left:30px}
固定位置时,它将带走位于导航文本下方的顶部蓝色条,并将导航文本固定到顶部并搞砸我与电话号码的格式(这是一个动态电话号码,用于拆分测试目的与呼叫跟踪指标和分析)。我可以让它与页面一起滚动,但除了格式错误之外,当我滚动时,当我滚动时,它会在页面上的一些对象和文本下方,而不是全部。
任何见解将不胜感激,我已经阅读了其他人围绕此问题的一些问题,答案很接近,但我还没有找到适用于我的网站 100% 的解决方案。
这对我有用,我假设您的主标题div 包含您的导航栏。
#main-header{
height:734px;
top: 0px;
position: fixed;
border-bottom:10px solid #162b4b;
}