如何将粘性导航栏添加到网页
如何将粘性导航栏添加到网页
提问于 2013-06-13 02:17:51
我正在写我的第一个网页，在为我的粘性导航栏找到正确的代码时遇到了一个问题。导航栏已经附加了一个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();
});回答 3
Stack Overflow用户
发布于 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
Stack Overflow用户
发布于 2013-06-13 02:23:14
要使其具有粘性，您可以在css中使用position: fixed。这使得它相对于浏览器窗口保持在相同的位置。对于这一部分，您不必使用任何jQuery。
Stack Overflow用户
发布于 2018-01-05 23:32:10
即使不使用javascript、jquery或任何其他脚本语言，也可以拥有粘性的导航栏。您只需要在CSS代码中添加另一个属性。所有能发挥魔力的都是position: fixed属性。position属性表示HTML中特定部门的位置类型。它后面跟着提到像素位置的属性。它们是top、bottom、right和left。代码如下：
#tab_container
{
background-color: #1E1E1E;
display: -webkit-box;
-webkit-box-flex: 1;
display: block;
position: relative;
max-width: 970px;
width: 100%;
text-align: center;
position: fixed;
top: 0px;
}
#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;
}<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>
<p> Some Text <p>
<p> Some Text <p>
<p> Some Text <p>
<p> Some Text <p>
<p> Some Text <p>
<p> Some Text <p>
<p> Some Text <p>
<p> Some Text <p>
<p> Some Text <p>
<p> Some Text <p>
<p> Some Text <p>
<p> Some Text <p>
<p> Some Text <p>
在这里，我们先使用position: fixed，然后使用top: 0px，因为我们希望导航栏始终固定在离屏幕顶部0像素的位置。如果你正在寻找一个粘性的，正如问题所说，你最好选择position: sticky。希望能有所帮助。
如果您想了解CSS中position属性的更多信息，请访问https://www.w3schools.com/css/css_positioning.asp
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/17072504
复制相关文章
相似问题
腾讯云开发者
