我正在写我的第一个网页,在为我的粘性导航栏找到正确的代码时遇到了一个问题。导航栏已经附加了一个jQuery代码,所以我想知道这是否会影响代码,或者如果我没有使用正确的代码。
<div id="tab_container">
<nav id="tabs">
<ul id="nav">
<li class="active"><a href="#">About</a></li>
<li class="inactive"><a href="#">Services</a></li>
<li class="inactive"><a href="#">Our Staff</a></li>
<li class="inactive"><a href="#">book</a></li>
<li class="inactive"><a href="#">Gift Cards</a></li>
<li class="inactive"><a href="#">Reviews</a></li>
</ul>
</nav>
</div>这是我的css。
#tab_container
{
background-color: #1E1E1E;
display: -webkit-box;
-webkit-box-flex: 1;
display: block;
position: relative;
max-width: 970px;
width: 100%;
text-align: center;
}
#tabs
{
float: left;
margin-top: 0px;
width: 100%;
max-width: 970px;
background-color: #1E1E1E;
padding-top: 20px;
text-align: center;
}
#nav
{
width: 100%;
max-width: 970px;
text-align: center;
background-color: #1E1E1E;
}
ul
{
float: left;
max-width: 970px;
display: -webkit-box;
-webkit-box-flex: 1;
width: 100%;
padding-left: 0px;
margin-bottom: 0px;
margin-top: 0px;
margin-right: 0px;
text-align: center;
background-color: #1E1E1E;
}
ul li
{
display: inline-block;
text-align: center;
width: 158px;
height: 70px;
background-color: #1a1a1a;
font-size: 18px;
text-transform: uppercase;
text-align: center;
margin:0 auto;
padding: 0;
}
ul li a
{
color: #54544b;
display: block;
height: 100%;
width: 100%;
text-decoration: none;
text-align: center;
margin: 0px auto;
line-height: 70px;
}
a:hover
{
color: #CF7BA1;
}
.active a
{
text-decoration: underline;
color: #CF7BA1;
background-color: #222;
}对于我已经包含的jQuery ...
$(document).ready(function(){
$('ul#nav li').click(function(){
var number = $(this).index();
$('.sec').hide().eq(number).show();
$(this).toggleClass('active inactive');
$('ul#nav li').not(this).removeClass('active').addClass('inactive');
});
$('.sec').not(':first').hide();
});发布于 2013-06-13 02:19:53
试试position:fixed;
#tab_container
{
background-color: #1E1E1E;
display: -webkit-box;
-webkit-box-flex: 1;
display: block;
position: fixed; //change this to fixed....to stick to top
max-width: 970px;
width: 100%;
text-align: center;
}不过,您必须在容器div中补偿头部的高度,因此请注意,在我的demo中,我在"bodydiv“中添加了200px的填充来补偿。
DEMO HERE
https://stackoverflow.com/questions/17072504
复制相似问题