Bootstrap 3文档中垂直固定菜单示例 - 调整大小问题

9

我正在尝试使用Bootstrap 3垂直滚动监听(vertical scrollspy),但是在源代码中找不到任何示例。

我从这里的文档页面http://getbootstrap.com/javascript/中提取了内容,但是侧边栏出现了一些非常奇怪的调整大小错误,具体包括:

  1. 刷新页面时,导航栏的位置和功能正常,但在调整页面大小时,它可能会超出页脚或在内容结束之前消失。

  2. 当刷新并且浏览器视窗显示页脚(而不是内容)时,侧边导航栏将显示在页脚中,而应该停止并与内容的末尾对齐。

  3. 如果浏览器窗口最大化,则单击导航项不会滚动到相应的标题元素。

我的问题演示视频在此处http://youtu.be/Px5I-wKZ0sA

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>

1
这是您代码的 JSFiddle 链接:http://jsfiddle.net/jdwire/eytMx/embedded/result/ - Joshua Dwire
1
我认为这个问题可以在http://fiddle.jshell.net/jdwire/eytMx/show/light/上重现。 - Joshua Dwire
感谢您的努力,@Joshua。我认为在这个小例子中,affix-bottom和affix之间存在一些奇怪的闪烁问题,而原始代码中并没有这种情况。也许这与fiddle沙盒有关?http://www51.zippyshare.com/v/5526428/file.html - morleyc
我确实注意到了一些闪烁,但无法确定那是否是你遇到的问题的一部分。请查看我的答案,其中包含一个似乎正常工作且不会闪烁的 fiddle。 - Joshua Dwire
3个回答

13

我花了一些时间研究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)

我认为这个行为就像你想要的。

关键是让所有重新计算发生在正确的时间。当页面重新加载时,似乎没有任何东西检查导航框的位置。页脚的高度也需要每次重新计算,因为当页面大小调整时,页脚的高度会改变。

我还必须调整事物的时间。请注意,有两个具有不同延迟但相同代码的setTimeouts。这是为了尽快完成位置检查,但也要等待足够长的时间以适应IE。

有关更多详细信息,请参见代码中的注释。

JSFiddle: http://jsfiddle.net/jdwire/2XXRF/25/

全屏结果:http://fiddle.jshell.net/jdwire/2XXRF/25/show/light/


@Joshua,谢谢,对我来说,这个小工具在滚动时会将侧边栏顶部和底部弄乱。我同意元素顶部在页面调整大小时没有被重新计算,因此包含内容的div会自行更改。这导致了许多问题。我无法看到affix.js在任何时候进行重新计算,尽管http://getbootstrap.com/2.3.2/assets/js/bootstrap-affix.js中提到了它。 - morleyc
@g18c 你用的是什么浏览器?对我来说它没有顶部和底部溢出。 - Joshua Dwire
@g18c 我在Chrome中无法重现此问题,但在IE9中找到并修复了一些问题。您能否查看http://fiddle.jshell.net/jdwire/2XXRF/20/show/light/并检查它是否正常工作? - Joshua Dwire
@g18c 这里有一个在IE中运行得更好的:预览代码。之前的那个在刷新时没有更新导航框的位置。 - Joshua Dwire
@JoshuaDwire,最后那个链接似乎完全解决了我在Chrome和IE中看到的所有问题...谢谢!在进一步测试之前,我会让你知道,但到目前为止,在正常使用下运行得很好。是否可能编辑您的答案并说明所做的更改以及原因,这将有助于我学习,并受到极大赞赏。 - morleyc
显示剩余3条评论

5
我认为你可以通过使用和理解文档中相关部分的CSS和JavaScript来简化这个过程。
最复杂的部分是#sidebar CSS。使用.affix会将侧边栏从页面的典型流程中移除,因此您需要为#sidebar设置特定的宽度。CSS处理了侧边栏位置的3种情况(affix、affix-top和affix-bottom)。使用2个不同的媒体查询,以便在更大的屏幕上应用侧边栏固定效果>992px,并在>1200px时略微扩展。
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;
  }
}

另一个重要的部分是计算页眉(#masthead)在侧边栏上方和页脚下面的高度的JavaScript。这些高度用于确定affix在顶部变为粘性时的位置,并在视口中看到页脚时返回到绝对位置的底部。 JavaScript
$('#sidebar').affix({
      offset: {
        top: function () {
          var navOuterHeight = $('#masthead').height();
          return this.top = navOuterHeight;
        },
        bottom: function () {
          return (this.bottom = $('footer').outerHeight(true))
        }
      }
});

这是一个可用的示例/模板: http://bootply.com/84981

5

您正在使用 Twitter 文档中的 JavaScript。这些脚本的第一个注释是:

// 注意!!不要使用这些 JavaScript // 这都只是为了我们的文档而编写的垃圾代码!// ++++++++++++++++++++++++++++++++++++++++++

这些脚本仅处理此页面的问题/修复。尝试使用原始的 Bootstrap 插件来解决您的问题,或者针对您的特定情况进行扩展。

还可以阅读以下类似问题的内容:


我认为那个通知只是让开发人员知道那些文件不是 Bootstrap 核心的一部分。它们的 JavaScript 提供了如何使用 Bootstrap 的真实示例。它可以作为开发的基础,但需要根据情况进行更改。 - Joshua Dwire
你说得也许没错。Bootstrap文档很好用,所以看看它们是如何做的可能会有用。但我认为,在大多数情况下,除非你要构建完全相同的东西,否则从核心文件开始似乎更容易。 - Bass Jobsen

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接