个人中心
文章发布
退出
作者热门文章
- Java 双重比较
- java - 比较器与 Apache BeanComparator
- Objective-C 完成 block 导致额外的方法调用？
- database - RESTful URI 是否应该公开数据库主键？
26
4
我有一些 html 用于我的研究小组制作的软件库网站的页面布局。这是通过 bootstrap 3 完成的。我想要实现的是出现在 jumbotron 正下方的导航栏一旦向上滚动到页面顶部就会固定到页面顶部。我还希望页面左栏中的 nag 元素有类似的行为 - 当页面滚动并且它们到达顶部时 - 然后它们变得固定并停留在那里。通过阅读，我了解到推特 Bootstrap 中的 Affix 是执行此操作的方法，但我不完全确定我能想出如何正确执行此操作。
在下面的 HTML 中，滚动到现在应该横跨页面的导航栏被压扁 - 导航栏链接移动到导航栏品牌下方的一行，并且该栏不再横跨页面。一旦我弄清楚如何将词缀与导航栏一起使用，我希望将它与导航元素一起使用。谁能解释我需要做什么才能达到效果？我对网页设计相当陌生。
谢谢，本。
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>
最佳答案
如 Bootstrap 文档中所述，当 affix 启动时，您必须为 nav 和 navbar 定义 CSS 类...
"You must provide the styles for these classes yourself (independent of this plugin). The affix-top class should be in the regular flow of the document."
因此您需要为顶部导航栏和侧边导航栏添加一些 CSS。
#nav.affix {
position: fixed;
top: 0;
width: 100%;
z-index:10;
}
#sidebar.affix {
position: fixed;
top: 80px;
}
这是一个使用 affix 和顶部和侧面导航的 Bootply 演示:http://bootply.com/69848
关于html - 让 Affix 为导航和导航栏工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18450150/
26
4
0
我正在使用 twitter bootstrap 2.3.2 并包含了 Affix js。 div完美监听top:500px;但在底部有困难，到达底部时，它会在每个像素的 affix 和 affix-b
玩了几天 boostrap，对它提供的功能感到惊讶。 一直在尝试拥有某种“标题”，当用户向下滚动时，它会附在顶部。 您可以在这里找到我目前的工作:http://mp3dj.free.fr/affix/
通过查看 W3schools 的这个例子 How To Create an Affixed Navigation Menu 你会发现这行代码背后的原因 .affix + .container-flui
我的 html 中有这个 div: 我需要将 data-spy="affix"更改为
我整天都在 Bootply 沙箱中工作，在将相同的代码移动到实时服务器时遇到了问题。 沙箱在这里，词缀工作正常: http://www.bootply.com/wu2vXxkt5o# 在实时版本上我得
当我的导航栏使用 Bootstrap “固定”时，我也想应用自定义 CSS，但我不确定如何检测该事件。 Bootstrap 的后缀没有这方面的参数。 我的 haml 代码当前为 windowReady
我在这里创建了一个示例:http://jsfiddle.net/Ninjanoel/9GEGU/ 基本上，我想在右边添加一些东西，在这种情况下，红色框，我希望它看起来只是将自己固定在顶部，一旦发生正确
** 已更新 ** 因此，经过更多调查后，我将其范围缩小到阻止词缀类工作的这段 javascript.. 但同样.. 我不确定为什么这会破坏页面？ var panelExample = $('
我正在尝试使用 Bootstrap affix() 插件。我希望导航栏在我滚动时固定到屏幕顶部。这是我到目前为止所拥有的: http://jsfiddle.net/zncud7md/2/ 问题是当词缀
我正在使用最新版本的 bootstrap 3。我正在使用词缀插件来固定静态导航栏。但是它可以工作，在导航栏更新并固定在顶部之前会有很长的延迟。它在所有浏览器上都是可重复的。 我认为用视频展示问题最简单
我已经为 Bootstrap 和 data-spy 属性添加了库，当我向下滚动页面时，我想在其中修复 div。但它不起作用，我几乎尝试了所有方法，但无法找出问题所在。是不是像 data-spy 属性在
在此example你可以看到，当我们向下滚动时，搜索字段的宽度变大了。如果我删除标签(带有搜索字形图标) - 一切正常。我对其他标签(如 )和其他元素类(如 .panel-group、.panel-h
我正在使用 Bootstrap 在页面的一侧添加一个菜单。我希望菜单在用户滚动过去时保留在页面顶部。我发现了 affix在 bootstrap.js 中。但是，因为我在屏幕上使用了不同的列尺寸，所以我
所以我在一个有固定导航栏的网站上工作: http://abnetworksa.rewind9.com/servicios/infraestructura/ 除了固定的导航栏，还有一个“粘性”侧边栏。此
我不是真正的开发人员，但我可以使用 HTML 和 CSS。我正在尝试使用 Bootstrap 3.3.7 构建一个站点，并且我从 an example 中获取了一些代码我在 Codeply 发现当用户
我想以与 stackoverflow 的提问 页面右侧的“如何格式化”类似的方式使用 bootstrap 词缀。 我可以通过添加 css .affix { top: 70px } 并使用 class=
使用 Bootstrap 已经有一段时间了，但在新项目中没有使用它。 很好奇是否有人知道 Bootstrap 的“词缀”的替代、易于使用的插件。 我真的只是在寻找一个元素去 position:fixe
我有一个使用 Twitter Bootstrap Affix 的元素插入。如果窗口垂直调整到小于项目高度的位置，我想从元素中删除词缀功能，因为您将无法在窗口中看到所有内容。 到目前为止，我已经在控制台
我有一些 html 用于我的研究小组制作的软件库网站的页面布局。这是通过 bootstrap 3 完成的。我想要实现的是出现在 jumbotron 正下方的导航栏一旦向上滚动到页面顶部就会固定到页面顶
我想为我的附加元素设置“停止”。 示例是对 http://9gag.com/ 进行投票, 它滚动到它的父容器。 我为此使用了词缀，我发现了“data-offset-bottom”属性(没有太多记录)
我是一名优秀的程序员,十分优秀！