在nav和navbar中使用Affix
在nav和navbar中使用Affix
提问于 2013-08-27 02:01:27
我有一些我的研究小组制作的软件库网站的页面布局的html。这是用bootstrap 3完成的。我想要实现的是出现在jumbotron下面的导航栏，一旦滚动到上面，它就会固定在页面的顶部。我也希望页面左栏中的nag元素有类似的行为-当页面滚动时，它们会到达顶部-然后它们会变得固定并停留在那里。通过阅读，我了解到在twitter bootstrap中使用Affix可以做到这一点，但我不能完全确定如何正确做到这一点。
使用下面的HTML，滚动到目前为止，应该跨越页面的导航栏被挤压了-导航栏链接移动到导航栏品牌下面的一行，并且栏不再跨越页面。一旦我弄清楚如何在导航栏中使用affix，我希望将其与nav元素一起使用。有谁能解释一下我需要做些什么才能达到效果？我是网页设计的新手。
谢谢，本。
HTML：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>SOFTWARE - GETTING STARTED WITH SOFTWARE</title>
<link rel="stylesheet" href="css/bootstrap.css" type="text/css"/>
</head>
<body>
<style>
.jumbotron {
margin-bottom: 0px;
}
</style>
<!-- Start of main container -->
<div class="container-fluid main">
<div class="row-fluid">
<div class="jumbotron">
<h1> Getting Started </h1>
<p> Installing SOFTWARE on your machine is easy for most systems.
This guide will get you up and running.
</p>
</div>
</div>
<!--Here's thestart of the navabar I'm trying to affix -->
<div class="row-fluid" data-spy="affix" data-offset-top="200">
<div class="navbar navbar-inverse">
<div class="navbar-header">
<a class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="navbar-brand" href="#">SOFTWARE</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="#">Home</a></li>
<li><a href="#">About SOFTWARE</a></li>
<li class="active"><a href="#">Getting Started</a></li>
<li><a href="#">Quick Start</a></li>
<li><a href="#">Full Documentation</a></li>
<li><a href="#">Contact</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Download <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">GitHub Repository</a></li>
<li><a href="#">Download TAR</a></li>
<li><a href="#">Download ZIP</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<!-- Begin Layout for Getting Started Page -->
<div class="row-fluid">
<div class="col-lg-3">
<ul class="nav nav-pills nav-stacked sidemenu">
<li><a href="#">Introduction</a></li>
<li><a href="#">Installing R</a></li>
<li><a href="#">R Recommendations</a></li>
<li><a href="#">Installing HybRIDS from GitHub</a></li>
<li><a href="#">Installing HybRIDS from Source File</a></li>
<li><a href="#">Installing HybRIDS from Binary File</a></li>
</ul>
</div>
<div class="col-lg-9 whitep">
<h1 class="whitep">Introduction</h1>
<p>
Installation text
Installation text
Installation text
Installation text
Installation text
</p>
<hr>
<h1>Installing R</h1>
<p>
R is simple to install for most operating systems. If you use a Mac or PC or Linux system, the process for installing it is like for installing any other software on that system.
</p>
<p>
TEST text to fill page to test scrolling behaviour...
</p>
<p>
TEST
</p>
<p>
TEST
</p>
<p>
TEST
</p>
<p>
TEST
</p>
<p>
TEST
</p>
<p>
TEST
</p>
<p>
TEST
</p>
<p>
TEST
</p>
<p>
TEST
</p>
<p>
TEST
</p>
<p>
TEST
</p>
<p>
TEST
</p>
<p>
TEST
</p>
<p>
TEST
</p>
<p>
TEST
</p>
</div>
</div>
</div> <!--End of main Container-->
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="js/bootstrap.js"></script>
</body>
</html>回答 1
Stack Overflow用户
回答已采纳
发布于 2013-08-27 04:23:00
正如Bootstrap文档中所述，当affix生效时，您必须为nav和navbar定义CSS类。
“您必须自己提供这些类的样式(独立于此插件)。附加顶层类应该在文档的常规流程中。”
所以你需要在顶部导航栏和侧边导航栏上都有一些CSS。
#nav.affix {
position: fixed;
top: 0;
width: 100%;
z-index:10;
}
#sidebar.affix {
position: fixed;
top: 80px;
}这是一个使用顶部和侧面导航的affix的Bootply演示：http://bootply.com/69848
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/18450150
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号