twitter-bootstrap 文档中的 Bootstrap 3 垂直词缀菜单示例 - 调整大小问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19099325/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-10-21 18:40:35 来源:igfitidea点击:
Bootstrap 3 vertical affix menu example as in the docs - resizing issue
提问by morleyc
I am trying to use Bootstrap 3 vertical scrollspy, however I cannot find any examples included in the source.
我正在尝试使用 Bootstrap 3 vertical scrollspy，但是我找不到源中包含的任何示例。
I went ahead and stripped out the documentation pages from here http://getbootstrap.com/javascript/but I am getting some very strange resize bugs with the sidebar - specifically:
我继续从这里删除了文档页面http://getbootstrap.com/javascript/但我在侧边栏上遇到了一些非常奇怪的调整大小错误 - 特别是：
On page refresh the nav bar is positioned and works OK, but on page resize it can drop off past the footer, or disapear before the end of the content.
When refreshed and the browser view port shows the footer (and not the content), the side nav bar shows in the footer whereas is should stop and be aligned with the end of the content.
If the browser window is maximized, clicking on the navigation items does not scroll to the corresponding header element.
在页面刷新时，导航栏已定位并且工作正常，但在页面调整大小时，它可能会从页脚处消失，或者在内容结束之前消失。
当刷新并且浏览器视图端口显示页脚（而不是内容）时，侧边导航栏显示在页脚中，而应该停止并与内容的末尾对齐。
如果浏览器窗口最大化，单击导航项不会滚动到相应的标题元素。
Video demo of my issues are here http://youtu.be/Px5I-wKZ0sA
我的问题的视频演示在这里http://youtu.be/Px5I-wKZ0sA
Pastebin post hereand code below:
Pastebin 在这里发帖，代码如下：
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css" />
<style type="text/css">
body {
position: relative; /* For scrollyspy */
padding-top: 50px; /* Account for fixed navbar */
}
/* Keep code small in tables on account of limited space */
.table code {
font-size: 13px;
font-weight: normal;
}
/* Outline button for use within the docs */
.btn-outline {
color: #563d7c;
background-color: #fff;
border-color: #e5e5e5;
}
.btn-outline:hover,
.btn-outline:focus,
.btn-outline:active {
color: #fff;
background-color: #563d7c;
border-color: #563d7c;
}
/* Inverted outline button (white on dark) */
.btn-outline-inverse {
color: #fff;
background-color: transparent;
border-color: #cdbfe3;
}
.btn-outline-inverse:hover,
.btn-outline-inverse:focus,
.btn-outline-inverse:active {
color: #563d7c;
text-shadow: none;
background-color: #fff;
border-color: #fff;
}
.bs-docs-nav {
text-shadow: 0 -1px 0 rgba(0,0,0,.15);
background-color: #563d7c;
border-color: #463265;
box-shadow: 0 1px 0 rgba(255,255,255,.1);
}
.bs-docs-nav .navbar-collapse {
border-color: #463265;
}
.bs-docs-nav .navbar-brand {
color: #fff;
}
.bs-docs-nav .navbar-nav > li > a {
color: #cdbfe3;
}
.bs-docs-nav .navbar-nav > li > a:hover {
color: #fff;
}
.bs-docs-nav .navbar-nav > .active > a,
.bs-docs-nav .navbar-nav > .active > a:hover {
color: #fff;
background-color: #463265;
}
.bs-docs-nav .navbar-toggle {
border-color: #563d7c;
}
.bs-docs-nav .navbar-toggle:hover {
background-color: #463265;
border-color: #463265;
}
.bs-footer {
padding-top: 40px;
padding-bottom: 30px;
margin-top: 100px;
color: #777;
text-align: center;
border-top: 1px solid #e5e5e5;
}
.footer-links {
margin: 10px 0;
padding-left: 0;
}
.footer-links li {
display: inline;
padding: 0 2px;
}
.footer-links li:first-child {
padding-left: 0;
}
@media (min-width: 768px) {
.bs-footer {
text-align: left;
}
.bs-footer p {
margin-bottom: 0;
}
}
.bs-docs-home,
.bs-header {
color: #cdbfe3;
background-color: #563d7c;
}
/* Masthead (headings and download button) */
.bs-masthead {
position: relative;
padding: 30px 15px;
text-align: center;
text-shadow: 0 1px 0 rgba(0,0,0,.15);
}
.bs-masthead h1 {
font-size: 50px;
line-height: 1;
color: #fff;
}
.bs-masthead .btn-outline {
margin-top: 20px;
margin-bottom: 20px;
padding: 18px 24px;
font-size: 21px;
}
/* Links to project-level content like the repo, Expo, etc */
.bs-masthead-links {
margin-top: 20px;
margin-bottom: 20px;
padding: 0 15px;
list-style: none;
text-align: center;
}
.bs-masthead-links li {
display: inline;
}
.bs-masthead-links li + li {
margin-left: 20px;
}
.bs-masthead-links a {
color: #fff;
}
@media screen and (min-width: 768px) {
.bs-masthead {
text-align: left;
padding-top: 140px;
padding-bottom: 140px;
}
.bs-masthead h1 {
font-size: 100px;
}
.bs-masthead .lead {
margin-right: 25%;
font-size: 30px;
}
.bs-masthead-links {
padding: 0;
text-align: left;
}
}
/* Page headers */
.bs-header {
padding: 30px 15px 40px; /* side padding builds on .container 15px, so 30px */
font-size: 16px;
text-align: center;
text-shadow: 0 1px 0 rgba(0,0,0,.15);
}
.bs-header h1 {
color: #fff;
}
.bs-header p {
font-weight: 300;
line-height: 1.5;
}
.bs-header .container {
position: relative;
}
@media screen and (min-width: 768px) {
.bs-header {
font-size: 21px;
text-align: left;
}
.bs-header h1 {
font-size: 60px;
line-height: 1;
}
}
@media screen and (min-width: 992px) {
.bs-header h1,
.bs-header p {
margin-right: 380px;
}
}
.bs-sidebar.affix {
position: static;
}
/* First level of nav */
.bs-sidenav {
margin-top: 30px;
margin-bottom: 30px;
padding-top: 10px;
padding-bottom: 10px;
text-shadow: 0 1px 0 #fff;
background-color: #f7f5fa;
border-radius: 5px;
}
/* All levels of nav */
.bs-sidebar .nav > li > a {
display: block;
color: #716b7a;
padding: 5px 20px;
}
.bs-sidebar .nav > li > a:hover,
.bs-sidebar .nav > li > a:focus {
text-decoration: none;
background-color: #e5e3e9;
border-right: 1px solid #dbd8e0;
}
.bs-sidebar .nav > .active > a,
.bs-sidebar .nav > .active:hover > a,
.bs-sidebar .nav > .active:focus > a {
font-weight: bold;
color: #563d7c;
background-color: transparent;
border-right: 1px solid #563d7c;
}
/* Nav: second level (shown on .active) */
.bs-sidebar .nav .nav {
display: none; /* Hide by default, but at >768px, show it */
margin-bottom: 8px;
}
.bs-sidebar .nav .nav > li > a {
padding-top: 3px;
padding-bottom: 3px;
padding-left: 30px;
font-size: 90%;
}
/* Show and affix the side nav when space allows it */
@media screen and (min-width: 992px) {
.bs-sidebar .nav > .active > ul {
display: block;
}
/* Widen the fixed sidebar */
.bs-sidebar.affix,
.bs-sidebar.affix-bottom {
width: 213px;
}
.bs-sidebar.affix {
position: fixed; /* Undo the static from mobile first approach */
top: 80px;
}
.bs-sidebar.affix-bottom {
position: absolute; /* Undo the static from mobile first approach */
}
.bs-sidebar.affix-bottom .bs-sidenav,
.bs-sidebar.affix .bs-sidenav {
margin-top: 0;
margin-bottom: 0;
}
}
@media screen and (min-width: 1200px) {
/* Widen the fixed sidebar again */
.bs-sidebar.affix-bottom,
.bs-sidebar.affix {
width: 263px;
}
}
/* Space things out */
.bs-docs-section + .bs-docs-section {
padding-top: 40px;
}
/* Janky fix for preventing navbar from overlapping */
h1[id] {
padding-top: 80px;
margin-top: -45px;
}
/* Common styles for all types */
.bs-callout {
margin: 20px 0;
padding: 15px 30px 15px 15px;
border-left: 5px solid #eee;
}
.bs-callout h4 {
margin-top: 0;
}
.bs-callout p:last-child {
margin-bottom: 0;
}
.bs-callout code,
.bs-callout .highlight {
background-color: #fff;
}
/* Variations */
.bs-callout-danger {
background-color: #fcf2f2;
border-color: #dFb5b4;
}
.bs-callout-warning {
background-color: #fefbed;
border-color: #f1e7bc;
}
.bs-callout-info {
background-color: #f0f7fd;
border-color: #d0e3f0;
}
/* Navbars */
.bs-example .navbar:last-child {
margin-bottom: 0;
}
.bs-navbar-top-example,
.bs-navbar-bottom-example {
z-index: 1;
padding: 0;
overflow: hidden; /* cut the drop shadows off */
}
.bs-navbar-top-example .navbar-header,
.bs-navbar-bottom-example .navbar-header {
margin-left: 0;
}
.bs-navbar-top-example .navbar-fixed-top,
.bs-navbar-bottom-example .navbar-fixed-bottom {
position: relative;
margin-left: 0;
margin-right: 0;
}
.bs-navbar-top-example {
padding-bottom: 45px;
}
.bs-navbar-top-example:after {
top: auto;
bottom: 15px;
}
.bs-navbar-top-example .navbar-fixed-top {
top: -1px;
}
.bs-navbar-bottom-example {
padding-top: 45px;
}
.bs-navbar-bottom-example .navbar-fixed-bottom {
bottom: -1px;
}
.bs-navbar-bottom-example .navbar {
margin-bottom: 0;
}
@media (min-width: 768px) {
.bs-navbar-top-example .navbar-fixed-top,
.bs-navbar-bottom-example .navbar-fixed-bottom {
position: absolute;
}
.bs-navbar-top-example {
border-radius: 0 0 4px 4px;
}
.bs-navbar-bottom-example {
border-radius: 4px 4px 0 0;
}
}
/* Pagination */
.bs-example .pagination {
margin-top: 10px;
margin-bottom: 10px;
}
/* Pager */
.bs-example > .pager {
margin-top: 0;
}
/* Example modals */
.bs-example-modal {
background-color: #f5f5f5;
}
.bs-example-modal .modal {
position: relative;
top: auto;
right: auto;
left: auto;
bottom: auto;
z-index: 1;
display: block;
}
.bs-example-modal .modal-dialog {
left: auto;
margin-left: auto;
margin-right: auto;
}
/* Example dropdowns */
.bs-example > .dropdown > .dropdown-menu {
position: static;
display: block;
margin-bottom: 5px;
}
/* Example tabbable tabs */
.bs-example-tabs .nav-tabs {
margin-bottom: 15px;
}
/* Tooltips */
.bs-example-tooltips {
text-align: center;
}
.bs-example-tooltips > .btn {
margin-top: 5px;
margin-bottom: 5px;
}
/* Popovers */
.bs-example-popover {
padding-bottom: 24px;
background-color: #f9f9f9;
}
.bs-example-popover .popover {
position: relative;
display: block;
float: left;
width: 260px;
margin: 20px;
}
/* Scrollspy demo on fixed height div */
.scrollspy-example {
position: relative;
height: 200px;
margin-top: 10px;
overflow: auto;
}
/*
* Code snippets
*
* Generated via Pygments and Jekyll, these are snippets of HTML, CSS, and JS.
*/
.highlight {
display: none; /* hidden by default, until >480px */
padding: 9px 14px;
margin-bottom: 14px;
background-color: #f7f7f9;
border: 1px solid #e1e1e8;
border-radius: 4px;
}
.highlight pre {
padding: 0;
margin-top: 0;
margin-bottom: 0;
background-color: transparent;
border: 0;
white-space: nowrap;
}
.highlight pre code {
font-size: inherit;
color: #333; /* Effectively the base text color */
}
.highlight pre .lineno {
display: inline-block;
width: 22px;
padding-right: 5px;
margin-right: 10px;
text-align: right;
color: #bebec5;
}
/* Show code snippets when we have the space */
@media screen and (min-width: 481px) {
.highlight {
display: block;
}
}
/* Responsive (scrollable) doc tables */
.table-responsive .highlight pre {
white-space: normal;
}
/* Utility classes table */
.bs-table th small,
.responsive-utilities th small {
display: block;
font-weight: normal;
color: #999;
}
.responsive-utilities tbody th {
font-weight: normal;
}
.responsive-utilities td {
text-align: center;
}
.responsive-utilities td.is-visible {
color: #468847;
background-color: #dff0d8 !important;
}
.responsive-utilities td.is-hidden {
color: #ccc;
background-color: #f9f9f9 !important;
}
/* Responsive tests */
.responsive-utilities-test {
margin-top: 5px;
}
.responsive-utilities-test .col-xs-6 {
margin-bottom: 10px;
}
.responsive-utilities-test span {
padding: 15px 10px;
font-size: 14px;
font-weight: bold;
line-height: 1.1;
text-align: center;
border-radius: 4px;
}
.visible-on .col-xs-6 .hidden-xs,
.visible-on .col-xs-6 .hidden-sm,
.visible-on .col-xs-6 .hidden-md,
.visible-on .col-xs-6 .hidden-lg,
.hidden-on .col-xs-6 .visible-xs,
.hidden-on .col-xs-6 .visible-sm,
.hidden-on .col-xs-6 .visible-md,
.hidden-on .col-xs-6 .visible-lg {
color: #999;
border: 1px solid #ddd;
}
.visible-on .col-xs-6 .visible-xs,
.visible-on .col-xs-6 .visible-sm,
.visible-on .col-xs-6 .visible-md,
.visible-on .col-xs-6 .visible-lg,
.hidden-on .col-xs-6 .hidden-xs,
.hidden-on .col-xs-6 .hidden-sm,
.hidden-on .col-xs-6 .hidden-md,
.hidden-on .col-xs-6 .hidden-lg {
color: #468847;
background-color: #dff0d8;
border: 1px solid #d6e9c6;
}
/* For the variables, use regular weight */
#less-section label {
font-weight: normal;
}
/* Downloads */
.bs-customize-download .btn-outline {
padding: 20px;
}
/* Error handling */
.bs-customizer-alert {
position: fixed;
top: 51px;
left: 0;
right: 0;
z-index: 1030;
padding: 15px 0;
color: #fff;
background-color: #d9534f;
box-shadow: inset 0 1px 0 rgba(255,255,255,.25);
border-bottom: 1px solid #b94441;
}
.bs-customizer-alert .close {
margin-top: -4px;
font-size: 24px;
}
.bs-customizer-alert p {
margin-bottom: 0;
}
.bs-customizer-alert .glyphicon {
margin-right: 5px;
}
.bs-customizer-alert pre {
margin: 10px 0 0;
color: #fff;
background-color: #a83c3a;
border-color: #973634;
box-shadow: inset 0 2px 4px rgba(0,0,0,.05), 0 1px 0 rgba(255,255,255,.1);
}
</style>
</head>
<body>
<header class="navbar navbar-inverse navbar-fixed-top bs-docs-nav" role="banner">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="../" class="navbar-brand">Home</a>
</div>
<nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
<ul class="nav navbar-nav">
<li class="active">
<a href="../menu1">Menu 1</a>
</li>
<li>
<a href="../menu2">Menu 2</a>
</li>
<li>
<a href="../menu3">Menu 3</a>
</li>
</ul>
</nav>
</div>
</header>
<div class="bs-header" id="content">
<div class="container">
<h1>Titleblock Header</h1>
<p>Some interesting catchy phrase better than Lorem ipsum.</p>
</div>
</div>
<div class="container bs-docs-container">
<div class="row">
<div class="col-md-3">
<div class="bs-sidebar hidden-print" role="complementary">
<ul class="nav bs-sidenav">
<li><a href="#one">One</a></li>
<li><a href="#two">Two</a></li>
<li><a href="#three">Three</a></li>
</ul>
</div> <!-- end bs-sidebar -->
</div> <!-- end col-md-3 -->
<div class="col-md-9">
<div>
<h1 id="one">ONE</h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac felis sed eros bibendum tincidunt.
In vel lectus sit amet velit ullamcorper sollicitudin eu lacinia nisi.
Ut sagittis massa non ultricies hendrerit. Fusce non mauris augue. Phasellus imperdiet nisi quis ante commodo dignissim.
Aenean vel bibendum ipsum. Proin lobortis lobortis felis nec aliquet. Nunc vestibulum quis enim eu venenatis.
Vivamus consectetur justo nec quam euismod, ac pellentesque justo varius. Morbi vel dolor at nisi dictum convallis nec eu ligula.
Duis consequat purus ut neque bibendum convallis. Aliquam tempor justo diam, sed dapibus diam laoreet aliquam.
Curabitur feugiat neque quis nunc tincidunt porttitor. Integer in nulla metus. Proin pulvinar, massa quis bibendum ullamcorper,
arcu arcu convallis mi, ut egestas eros dolor non lacus. Morbi id orci sapien.
</div>
<div>
<h1 id="two">TWO</h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac felis sed eros bibendum tincidunt.
In vel lectus sit amet velit ullamcorper sollicitudin eu lacinia nisi.
Ut sagittis massa non ultricies hendrerit. Fusce non mauris augue. Phasellus imperdiet nisi quis ante commodo dignissim.
Aenean vel bibendum ipsum. Proin lobortis lobortis felis nec aliquet. Nunc vestibulum quis enim eu venenatis.
Vivamus consectetur justo nec quam euismod, ac pellentesque justo varius. Morbi vel dolor at nisi dictum convallis nec eu ligula.
Duis consequat purus ut neque bibendum convallis. Aliquam tempor justo diam, sed dapibus diam laoreet aliquam.
Curabitur feugiat neque quis nunc tincidunt porttitor. Integer in nulla metus. Proin pulvinar, massa quis bibendum ullamcorper,
arcu arcu convallis mi, ut egestas eros dolor non lacus. Morbi id orci sapien.
</div>
<div>
<h1 id="three">THREE</h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac felis sed eros bibendum tincidunt.
In vel lectus sit amet velit ullamcorper sollicitudin eu lacinia nisi.
Ut sagittis massa non ultricies hendrerit. Fusce non mauris augue. Phasellus imperdiet nisi quis ante commodo dignissim.
Aenean vel bibendum ipsum. Proin lobortis lobortis felis nec aliquet. Nunc vestibulum quis enim eu venenatis.
Vivamus consectetur justo nec quam euismod, ac pellentesque justo varius. Morbi vel dolor at nisi dictum convallis nec eu ligula.
Duis consequat purus ut neque bibendum convallis. Aliquam tempor justo diam, sed dapibus diam laoreet aliquam.
Curabitur feugiat neque quis nunc tincidunt porttitor. Integer in nulla metus. Proin pulvinar, massa quis bibendum ullamcorper,
arcu arcu convallis mi, ut egestas eros dolor non lacus. Morbi id orci sapien.
</div>
</div> <!-- end col-md-9 -->
</div> <!-- end row -->
</div> <!-- end container -->
<footer class="bs-footer" role="contentinfo">
<div class="container">
<div class="row">
<div class="col-md-12">
<h1>FOOTER GOES HERE</h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac felis sed eros bibendum tincidunt.
In vel lectus sit amet velit ullamcorper sollicitudin eu lacinia nisi.
Ut sagittis massa non ultricies hendrerit. Fusce non mauris augue. Phasellus imperdiet nisi quis ante commodo dignissim.
Aenean vel bibendum ipsum. Proin lobortis lobortis felis nec aliquet. Nunc vestibulum quis enim eu venenatis.
Vivamus consectetur justo nec quam euismod, ac pellentesque justo varius. Morbi vel dolor at nisi dictum convallis nec eu ligula.
Duis consequat purus ut neque bibendum convallis. Aliquam tempor justo diam, sed dapibus diam laoreet aliquam.
Curabitur feugiat neque quis nunc tincidunt porttitor. Integer in nulla metus. Proin pulvinar, massa quis bibendum ullamcorper,
arcu arcu convallis mi, ut egestas eros dolor non lacus. Morbi id orci sapien.
Mauris quis congue eros. Donec a nibh feugiat, elementum nisi in, bibendum velit. Morbi non est at urna convallis interdum ac ac mi.
Donec pretium nulla sit amet dapibus dapibus. Mauris interdum sed mauris eu congue. Nunc id adipiscing elit.
Aenean risus mi, tempus vel lectus sed, egestas pulvinar mi. Vestibulum dolor erat, tempor at erat sit amet,
consectetur scelerisque felis.
Aenean sit amet congue velit. Sed tincidunt facilisis fringilla. Ut feugiat dolor sed risus vehicula facilisis.
Integer dolor ligula, porttitor a mi eu, hendrerit fermentum tortor. Sed et dui arcu. Donec dui sem, tincidunt quis lorem fringilla,
rutrum hendrerit arcu. Suspendisse quis arcu tincidunt, tincidunt risus condimentum, sodales massa.
Maecenas aliquet elit in tortor placerat, nec sagittis augue condimentum. Integer laoreet vitae erat semper pharetra.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec egestas nisi nec mi facilisis,
eget ultricies est posuere. Integer tempor bibendum pellentesque.
Nulla pretium sollicitudin mi id rhoncus. Aliquam eget congue nunc. Maecenas tincidunt nulla quis metus pellentesque pulvinar.
Maecenas tincidunt sapien ac odio aliquam, id malesuada sem condimentum. Nam neque eros, aliquet non sem ut, ornare rutrum libero.
Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec et leo metus. Fusce elit nunc, elementum vitae egestas sit amet,
consectetur nec ipsum.
Aenean nisl libero, rutrum eget lacinia vel, faucibus ultrices turpis. Nullam nunc metus, auctor sed mi in, convallis euismod mi.
Nulla pulvinar scelerisque mauris vel varius. Nunc eu condimentum odio, eget placerat sem. Integer suscipit,
sapien vitae laoreet convallis, velit nibh pellentesque felis, quis tristique nulla orci eu felis.
Duis eu turpis rutrum, malesuada augue vitae, posuere nisi. Etiam vitae dolor eget dui eleifend fermentum. Mauris convallis,
risus vitae congue ultricies, nibh velit vehicula arcu, at tempor risus metus vitae diam. Donec pretium euismod mi id porta.
Integer dictum diam at erat feugiat, eu fringilla mi molestie. Phasellus interdum ultricies aliquet. Donec a elementum risus.
Phasellus non fringilla tellus, eu convallis augue. Aliquam enim lectus, vulputate ut sem et, fringilla commodo erat.
Aliquam urna magna, auctor scelerisque nisi a, egestas tempor nulla.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac felis sed eros bibendum tincidunt.
In vel lectus sit amet velit ullamcorper sollicitudin eu lacinia nisi.
Ut sagittis massa non ultricies hendrerit. Fusce non mauris augue. Phasellus imperdiet nisi quis ante commodo dignissim.
Aenean vel bibendum ipsum. Proin lobortis lobortis felis nec aliquet. Nunc vestibulum quis enim eu venenatis.
Vivamus consectetur justo nec quam euismod, ac pellentesque justo varius. Morbi vel dolor at nisi dictum convallis nec eu ligula.
Duis consequat purus ut neque bibendum convallis. Aliquam tempor justo diam, sed dapibus diam laoreet aliquam.
Curabitur feugiat neque quis nunc tincidunt porttitor. Integer in nulla metus. Proin pulvinar, massa quis bibendum ullamcorper,
arcu arcu convallis mi, ut egestas eros dolor non lacus. Morbi id orci sapien.
</div>
</div>
</div>
</footer>
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script>
!function ($) {
$(function(){
var $window = $(window)
var $body = $(document.body)
var navHeight = $('.navbar').outerHeight(true) + 10
$body.scrollspy({
target: '.bs-sidebar',
offset: navHeight
})
$window.on('load', function () {
$body.scrollspy('refresh')
})
$('.bs-docs-container [href=#]').click(function (e) {
e.preventDefault()
})
// back to top
setTimeout(function () {
var $sideBar = $('.bs-sidebar')
$sideBar.affix({
offset: {
top: function () {
var offsetTop = $sideBar.offset().top
var sideBarMargin = parseInt($sideBar.children(0).css('margin-top'), 10)
var navOuterHeight = $('.bs-docs-nav').height()
return (this.top = offsetTop - navOuterHeight - sideBarMargin)
}
, bottom: function () {
return (this.bottom = $('.bs-footer').outerHeight(true))
}
}
})
}, 100)
setTimeout(function () {
$('.bs-top').affix()
}, 100)
// tooltip demo
$('.tooltip-demo').tooltip({
selector: "[data-toggle=tooltip]",
container: "body"
})
$('.tooltip-test').tooltip()
$('.popover-test').popover()
$('.bs-docs-navbar').tooltip({
selector: "a[data-toggle=tooltip]",
container: ".bs-docs-navbar .nav"
})
})
}(window.jQuery)
</script>
</body>
</html>
回答by Joshua Dwire
I messed with the JavaScript for a while and here's what I came up with:
我弄乱了 JavaScript 一段时间，这是我想出的：
! function ($) {
$(function () {
var $window = $(window)
var $body = $(document.body)
var $sideBar = $('.bs-sidebar')
var navHeight = $('.navbar').outerHeight(true) + 10
$body.scrollspy({
target: '.bs-sidebar',
offset: navHeight
})
$('.bs-docs-container [href=#]').click(function (e) {
e.preventDefault()
})
$window.on('resize', function () {
$body.scrollspy('refresh')
// We were resized. Check the position of the nav box
$sideBar.affix('checkPosition')
})
$window.on('load', function () {
$body.scrollspy('refresh')
$('.bs-top').affix();
$sideBar.affix({
offset: {
top: function () {
var offsetTop = $sideBar.offset().top
var sideBarMargin = parseInt($sideBar.children(0).css('margin-top'), 10)
var navOuterHeight = $('.bs-docs-nav').height()
// We can cache the height of the header (hence the this.top=)
// This function will never be called again.
return (this.top = offsetTop - navOuterHeight - sideBarMargin);
},
bottom: function () {
// We can't cache the height of the footer, since it could change
// when the window is resized. This function will be called every
// time the window is scrolled or resized
return $('.bs-footer').outerHeight(true)
}
}
})
setTimeout(function () {
// Check the position of the nav box ASAP
$sideBar.affix('checkPosition')
}, 10);
setTimeout(function () {
// Check it again after a while (required for IE)
$sideBar.affix('checkPosition')
}, 100);
});
// tooltip demo
$('.tooltip-demo').tooltip({
selector: "[data-toggle=tooltip]",
container: "body"
})
$('.tooltip-test').tooltip()
$('.popover-test').popover()
$('.bs-docs-navbar').tooltip({
selector: "a[data-toggle=tooltip]",
container: ".bs-docs-navbar .nav"
})
})
}(window.jQuery)
I think this behaves like what you want.
我认为这就像你想要的那样。
The key was getting all of the recalculations to happen at the right time. Nothing seemed to be checking the position of the nav box when the page was reloaded. The height of the footer also needed to be recalculated every time because the footer changes height when the page is resized.
关键是让所有的重新计算都在正确的时间发生。重新加载页面时，似乎没有任何内容检查导航框的位置。页脚的高度也需要每次重新计算，因为当页面调整大小时页脚会改变高度。
I also had to play with the timing of things. Notice that there are two setTimeouts with different delays but the same code. This is to attempt to get the position check done soon but also wait long enough for IE.
我也不得不玩弄事情的时机。请注意，有两个具有不同延迟但代码相同的 setTimeout。这是为了尝试尽快完成位置检查，但也要为 IE 等待足够长的时间。
See the comments in the code for more details.
有关更多详细信息，请参阅代码中的注释。
JSFiddle: http://jsfiddle.net/jdwire/2XXRF/25/
JSFiddle：http: //jsfiddle.net/jdwire/2XXRF/25/
Full Screen Result: http://fiddle.jshell.net/jdwire/2XXRF/25/show/light/
回答by Bass Jobsen
You are using javascript from Twitter's Docs. The first comments of these scripts are:
您正在使用 Twitter 文档中的 javascript。这些脚本的第一个注释是：
// NOTICE!! DO NOT USE ANY OF THIS JAVASCRIPT // IT'S ALL JUST JUNK FOR OUR DOCS! // ++++++++++++++++++++++++++++++++++++++++++
// 注意！！请勿使用此 JAVASCRIPT 中的任何内容 // 对于我们的文档而言，这一切都是垃圾！// ++++++++++++++++++++++++++++++++++++++++++
These script handle problem / fixes for this pages only. Try to fix your problems with the original Bootstrap plugins or extend them for you specific situation.
这些脚本仅处理此页面的问题/修复。尝试使用原始 Bootstrap 插件解决您的问题或针对您的特定情况扩展它们。
Also read this questions which handle similar problems:
另请阅读处理类似问题的问题：
回答by Zim
I think you could simplify this a lot by using and understanding the relevant portions of the CSS and JavaScript from the docs.
我认为您可以通过使用和理解文档中 CSS 和 JavaScript 的相关部分来简化这一点。
The most complex part is the #sidebar CSS. Using .affixwill remove the sidebar from the typical flow of the page, so you need to set a specific width for the #sidebar. The CSS handles the 3 cases for the sidebar position (affix, affix-top and affix-bottom). 2 different media queries are used so that the sidebar affix is only applied on larger screens >992px, and slightly wider on >1200px..
最复杂的部分是#sidebar CSS。使用.affix将从页面的典型流程中删除侧边栏，因此您需要为#sidebar. CSS 处理侧边栏位置的 3 种情况（词缀、词缀顶部和词缀底部）。使用了 2 种不同的媒体查询，因此侧边栏词缀仅适用于大于 992 像素的较大屏幕，而在大于 1200 像素的屏幕上稍宽。
CSS
CSS
.affix-top,.affix{
position: static;
}
@media screen and (min-width: 992px) {
#sidebar .nav > .active > ul {
display: block;
}
#sidebar.affix-top {
position: static;
margin-top:30px;
width:228px;
}
#sidebar.affix,
#sidebar.affix-bottom {
width: 228px;
}
#sidebar.affix {
position: fixed;
top: 220px;
}
#sidebar.affix-bottom {
position: absolute;
}
}
@media screen and (min-width: 1200px) {
#sidebar.affix-bottom,
#sidebar.affix {
width: 235px;
}
}
The other important part is the javascript that calculates the height of the header (#masthead)above the sidebar, and footerbelow the sidebar. These heights are used to determine where affixwill become sticky at the top, and return to absolute position at the bottom when the footer is visible in the viewport.
其他重要的部分是，其计算标题的高度的JavaScript （#masthead）边栏以上，并且边栏下方。这些高度用于确定顶部何处会变得粘滞，并在页脚在视口中可见时返回底部的绝对位置。footeraffix
JavaScript
JavaScript
$('#sidebar').affix({
offset: {
top: function () {
var navOuterHeight = $('#masthead').height();
return this.top = navOuterHeight;
},
bottom: function () {
return (this.bottom = $('footer').outerHeight(true))
}
}
});
Here is a working example / template: http://bootply.com/84981
这是一个工作示例/模板：http: //bootply.com/84981
