Question

我正在处理这个HTML代码，它有一个固定的标题。它工作得很好，直到我刷新页面，它到达当前部分。我尝试了很多方法，但无法弄清楚问题。有人有解决方案吗？

.subMenu {
	position:fixed;
	top:163px;
	height: 50px;
	z-index: 2000;
	width: 100%;
	border-top: 1px solid #C7E603;
	background: url(../images/nav-bg.png) repeat-x #80B404;
	box-shadow: 0px 1px 5px #1F1E20;
}
.subMenu .inner {
	padding: 0;
	font-weight: 400;
}
.subNavBtn {
	display: block;
	height: 35px;
	width: 9.48%;
	float: left;
	margin: 0px 0px 0 0;
	text-decoration: none;
	font-size: 14px;
	font-family: 'Coda', cursive;
	padding: 15px 2% 0 2%;
	text-align: center;
	color: #3C6B00;
	text-transform:uppercase;
	border-left: 2px ridge #8FDF00;
	background: url(../images/nav_li.png) 0 -100px repeat-x;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
}

<div class="subMenu">
  <div class="wrap">
    <div class="inner">
      <div class="toolbar">
        <ul>
          <li> <a href="#sTop" id="sTop" class="subNavBtn">Home</a> </li>
          <li> <a href="#s1" id="s1" class="subNavBtn">About</a> </li>
          <li> <a href="#s2" id="s2" class="subNavBtn">Facilities</a> </li>
          <li> <a href="#ss" id="ss" class="subNavBtn">Gallery</a> </li>
          <li> <a href="#s3" id="s3" class="subNavBtn">Events</a> </li>
          <li>  <a href="#s4" id="s4" class="subNavBtn">Services</a> </li>
          <li> <a href="s5" id="s5" class="subNavBtn">Contact</a> </li>
          <div class="clear"></div>
        </ul>
      </div>
    </div>
  </div>
</div>

Answer 1

好的你必须添加line-hieght：50px; display：inline; 在.submenu

Answer 2

好的，你的评论很有帮助。我在你的源代码中看到你正在使用jQuery sMint作为粘性导航，它会在你的.subMenu类上使用内联生成的属性覆盖你的css属性。

所以它从页面顶部计算位置+ 163px（当它出错时）。

我看到你有两个s2课程。一个用于特许经营页面，一个用于设施（员工）页面。一旦你到达设施页面，固定导航栏就会有正确的行为。

所以我的建议是正确地增加你的部分类，如果bug仍然存在，请给我们回电。

Answer 3

我尝试了你提供的html和css。请尝试以下方法：将.subMenu的高度增加到80px 同时为ul - overflow:hidden; list-style:none;

提供以下样式

当页面刷新时，HTML固定标题正在改变位置

3 个答案: