Bootstrap3：自动剪辑贴side-nav

Question

我已经研究了一段时间，但无法让它正常工作或在这里找到类似的问题。

这里是 fiddle.

我们有一个附加的侧面导航，其中包含可变数量的链接。当链接数量变大时，侧边导航会超出可用高度。我想根据可用高度垂直剪掉它（不包括视图中的页脚）。我的意思是当项目被剪裁时应该出现一个滚动条。

有没有人处理过类似的问题？如果您能分享您的经验，我将不胜感激。如果设计不合理，请告诉我:)

我在这里包含了一些代码来制作s.o。快乐：

HTML:

<!-- Main Content -->
<div id="main-content" class="col-xs-9">
    <h2>Heading<a id="1"></a></h2>
    <p>Lorem ipsum ...</p>
    <h2>Heading<a id="2"></a></h2>
    <p>Lorem ipsum ...</p>
</div>
<!-- Sidebar -->
<div id="sidebar" class="col-xs-3">
    <div id="sidenav" role="navigation">
        <h3>Contents</h3>
        <ul class="nav nav-pills nav-stacked">
            <li><a class="list-group-item" href="#1">Heading</a></li>
            <li><a class="list-group-item" href="#2">Heading</a></li>
        </ul>
    </div>
</div>

JS:

// activate scrollspy and affix for sidenav
$('body').scrollspy({ target: '#sidenav' });
$('#sidenav').affix({
  offset: {
    top: 165
  }
})

CSS:

#sidenav.affix {
    top: 50px;
    z-index: 1;
    width: 212.5px;
}
#sidenav {
    margin-bottom: 20px;
}

Answer 1

棘手，因为元素的位置是固定的。尝试修改您的 .affix class:

#sidenav.affix {
  top: 50px;
  z-index: 1;
  width: 212.5px;
  bottom: 0;       /* <-- add */
  overflow: auto;  /* <-- add */
}

示例：

/* Latest compiled and minified JavaScript included as External Resource */

// activate scrollspy and affix for sidenav
$('body').scrollspy({
  target: '#sidenav'
});
$('#sidenav').affix({
  offset: {
    top: 165
  }
})

// smooth scrolling
$('a[href*=#]:not([href=#])').click(function() {
  if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
    var target = $(this.hash);
    target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
    if (target.length) {
      $('html,body').animate({
        scrollTop: target.offset().top
      }, 800);
      return false;
    }
  }
});

/* Latest compiled and minified CSS included as External Resource*/

/* Optional theme */

html,
body {
  height: 100%;
}
body {
  padding-top: 50px;
}
footer {
  margin: 50px 0;
}
h2 {
  margin-top: 60px;
}
/* side navigation */

/* media queries that make the side nav position static have been removed for easier editing in jsfiddle */

#sidenav.affix {
  top: 50px;
  z-index: 1;
  width: 212.5px;
  bottom: 0;
  overflow: auto;
}
#sidenav {
  margin-bottom: 20px;
}
.nav-stacked>li+li {
  margin-top: 0;
}
.nav-stacked>li>a {
  border-radius: 0 !important;
  margin-top: -1px;
}
.nav-stacked>li:first-child>a {
  border-top-left-radius: 4px !important;
  border-top-right-radius: 4px !important;
}
.nav-stacked>li:last-child>a {
  margin-bottom: 0 !important;
  border-bottom-right-radius: 4px !important;
  border-bottom-left-radius: 4px !important;
}
/* fix problem with anchors going behind top navbar */

#main-content h2 a {
  display: block;
  position: relative;
  top: -100px;
}

<html>

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
</head>
<!-- Side-nav comes after the main content -->

<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
  <div class="container">
    <a class="navbar-brand" href="index.html">We have a nav bar also!</a>
  </div>
</nav>

<!-- Page Content -->
<div class="container">
  <!-- Page Heading/Breadcrumbs -->
  <div class="row">
    <div class="col-lg-12">
      <h1 class="page-header">Test Page
                </h1>
      <ol class="breadcrumb">
        <li><a href="index.html">Home</a>
        </li>
        <li class="active">Test Page</li>
      </ol>
    </div>
  </div>
  <!-- /.row -->

  <!-- Content Row -->
  <div class="row">
    <div class="col-lg-12">

      <!-- Main Content -->
      <div id="main-content" class="col-xs-9">
        <h2>Heading<a id="1"></a></h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam egestas congue nibh, vel dictum ante posuere vitae. Cras gravida massa tempor metus eleifend sed elementum tortor scelerisque. Vivamus egestas, tortor quis luctus tristique, sem velit
          adipiscing risus, et tempus enim felis in massa. Morbi viverra, nisl quis rhoncus imperdiet, turpis massa vestibulum turpis, egestas faucibus nibh metus vel nunc. In hac habitasse platea dictumst. Nunc sit amet nisi quis ipsum tincidunt semper.
          Donec ac urna enim, et placerat arcu. Morbi eu laoreet justo. Nullam nec velit eu neque mattis pulvinar sed non libero. Sed sed vulputate erat. Fusce sit amet dui nibh.</p>
        <h2>Heading<a id="2"></a></h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam egestas congue nibh, vel dictum ante posuere vitae. Cras gravida massa tempor metus eleifend sed elementum tortor scelerisque. Vivamus egestas, tortor quis luctus tristique, sem velit
          adipiscing risus, et tempus enim felis in massa. Morbi viverra, nisl quis rhoncus imperdiet, turpis massa vestibulum turpis, egestas faucibus nibh metus vel nunc. In hac habitasse platea dictumst. Nunc sit amet nisi quis ipsum tincidunt semper.
          Donec ac urna enim, et placerat arcu. Morbi eu laoreet justo. Nullam nec velit eu neque mattis pulvinar sed non libero. Sed sed vulputate erat. Fusce sit amet dui nibh.</p>
        <h2>Heading<a id="3"></a></h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam egestas congue nibh, vel dictum ante posuere vitae. Cras gravida massa tempor metus eleifend sed elementum tortor scelerisque. Vivamus egestas, tortor quis luctus tristique, sem velit
          adipiscing risus, et tempus enim felis in massa. Morbi viverra, nisl quis rhoncus imperdiet, turpis massa vestibulum turpis, egestas faucibus nibh metus vel nunc. In hac habitasse platea dictumst. Nunc sit amet nisi quis ipsum tincidunt semper.
          Donec ac urna enim, et placerat arcu. Morbi eu laoreet justo. Nullam nec velit eu neque mattis pulvinar sed non libero. Sed sed vulputate erat. Fusce sit amet dui nibh.</p>
        <h2>Heading<a id="4"></a></h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam egestas congue nibh, vel dictum ante posuere vitae. Cras gravida massa tempor metus eleifend sed elementum tortor scelerisque. Vivamus egestas, tortor quis luctus tristique, sem velit
          adipiscing risus, et tempus enim felis in massa. Morbi viverra, nisl quis rhoncus imperdiet, turpis massa vestibulum turpis, egestas faucibus nibh metus vel nunc. In hac habitasse platea dictumst. Nunc sit amet nisi quis ipsum tincidunt semper.
          Donec ac urna enim, et placerat arcu. Morbi eu laoreet justo. Nullam nec velit eu neque mattis pulvinar sed non libero. Sed sed vulputate erat. Fusce sit amet dui nibh.</p>
        <h2>Heading<a id="5"></a></h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam egestas congue nibh, vel dictum ante posuere vitae. Cras gravida massa tempor metus eleifend sed elementum tortor scelerisque. Vivamus egestas, tortor quis luctus tristique, sem velit
          adipiscing risus, et tempus enim felis in massa. Morbi viverra, nisl quis rhoncus imperdiet, turpis massa vestibulum turpis, egestas faucibus nibh metus vel nunc. In hac habitasse platea dictumst. Nunc sit amet nisi quis ipsum tincidunt semper.
          Donec ac urna enim, et placerat arcu. Morbi eu laoreet justo. Nullam nec velit eu neque mattis pulvinar sed non libero. Sed sed vulputate erat. Fusce sit amet dui nibh.</p>
        <h2>Heading<a id="6"></a></h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam egestas congue nibh, vel dictum ante posuere vitae. Cras gravida massa tempor metus eleifend sed elementum tortor scelerisque. Vivamus egestas, tortor quis luctus tristique, sem velit
          adipiscing risus, et tempus enim felis in massa. Morbi viverra, nisl quis rhoncus imperdiet, turpis massa vestibulum turpis, egestas faucibus nibh metus vel nunc. In hac habitasse platea dictumst. Nunc sit amet nisi quis ipsum tincidunt semper.
          Donec ac urna enim, et placerat arcu. Morbi eu laoreet justo. Nullam nec velit eu neque mattis pulvinar sed non libero. Sed sed vulputate erat. Fusce sit amet dui nibh.</p>
        <h2>Heading<a id="7"></a></h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam egestas congue nibh, vel dictum ante posuere vitae. Cras gravida massa tempor metus eleifend sed elementum tortor scelerisque. Vivamus egestas, tortor quis luctus tristique, sem velit
          adipiscing risus, et tempus enim felis in massa. Morbi viverra, nisl quis rhoncus imperdiet, turpis massa vestibulum turpis, egestas faucibus nibh metus vel nunc. In hac habitasse platea dictumst. Nunc sit amet nisi quis ipsum tincidunt semper.
          Donec ac urna enim, et placerat arcu. Morbi eu laoreet justo. Nullam nec velit eu neque mattis pulvinar sed non libero. Sed sed vulputate erat. Fusce sit amet dui nibh.</p>
        <h2>Heading<a id="8"></a></h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam egestas congue nibh, vel dictum ante posuere vitae. Cras gravida massa tempor metus eleifend sed elementum tortor scelerisque. Vivamus egestas, tortor quis luctus tristique, sem velit
          adipiscing risus, et tempus enim felis in massa. Morbi viverra, nisl quis rhoncus imperdiet, turpis massa vestibulum turpis, egestas faucibus nibh metus vel nunc. In hac habitasse platea dictumst. Nunc sit amet nisi quis ipsum tincidunt semper.
          Donec ac urna enim, et placerat arcu. Morbi eu laoreet justo. Nullam nec velit eu neque mattis pulvinar sed non libero. Sed sed vulputate erat. Fusce sit amet dui nibh.</p>
        <h2>Heading<a id="9"></a></h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam egestas congue nibh, vel dictum ante posuere vitae. Cras gravida massa tempor metus eleifend sed elementum tortor scelerisque. Vivamus egestas, tortor quis luctus tristique, sem velit
          adipiscing risus, et tempus enim felis in massa. Morbi viverra, nisl quis rhoncus imperdiet, turpis massa vestibulum turpis, egestas faucibus nibh metus vel nunc. In hac habitasse platea dictumst. Nunc sit amet nisi quis ipsum tincidunt semper.
          Donec ac urna enim, et placerat arcu. Morbi eu laoreet justo. Nullam nec velit eu neque mattis pulvinar sed non libero. Sed sed vulputate erat. Fusce sit amet dui nibh.</p>
        <h2>Heading<a id="10"></a></h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam egestas congue nibh, vel dictum ante posuere vitae. Cras gravida massa tempor metus eleifend sed elementum tortor scelerisque. Vivamus egestas, tortor quis luctus tristique, sem velit
          adipiscing risus, et tempus enim felis in massa. Morbi viverra, nisl quis rhoncus imperdiet, turpis massa vestibulum turpis, egestas faucibus nibh metus vel nunc. In hac habitasse platea dictumst. Nunc sit amet nisi quis ipsum tincidunt semper.
          Donec ac urna enim, et placerat arcu. Morbi eu laoreet justo. Nullam nec velit eu neque mattis pulvinar sed non libero. Sed sed vulputate erat. Fusce sit amet dui nibh.</p>
        <h2>Heading<a id="11"></a></h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam egestas congue nibh, vel dictum ante posuere vitae. Cras gravida massa tempor metus eleifend sed elementum tortor scelerisque. Vivamus egestas, tortor quis luctus tristique, sem velit
          adipiscing risus, et tempus enim felis in massa. Morbi viverra, nisl quis rhoncus imperdiet, turpis massa vestibulum turpis, egestas faucibus nibh metus vel nunc. In hac habitasse platea dictumst. Nunc sit amet nisi quis ipsum tincidunt semper.
          Donec ac urna enim, et placerat arcu. Morbi eu laoreet justo. Nullam nec velit eu neque mattis pulvinar sed non libero. Sed sed vulputate erat. Fusce sit amet dui nibh.</p>
        <h2>Heading<a id="12"></a></h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam egestas congue nibh, vel dictum ante posuere vitae. Cras gravida massa tempor metus eleifend sed elementum tortor scelerisque. Vivamus egestas, tortor quis luctus tristique, sem velit
          adipiscing risus, et tempus enim felis in massa. Morbi viverra, nisl quis rhoncus imperdiet, turpis massa vestibulum turpis, egestas faucibus nibh metus vel nunc. In hac habitasse platea dictumst. Nunc sit amet nisi quis ipsum tincidunt semper.
          Donec ac urna enim, et placerat arcu. Morbi eu laoreet justo. Nullam nec velit eu neque mattis pulvinar sed non libero. Sed sed vulputate erat. Fusce sit amet dui nibh.</p>
        <h2>Heading<a id="13"></a></h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam egestas congue nibh, vel dictum ante posuere vitae. Cras gravida massa tempor metus eleifend sed elementum tortor scelerisque. Vivamus egestas, tortor quis luctus tristique, sem velit
          adipiscing risus, et tempus enim felis in massa. Morbi viverra, nisl quis rhoncus imperdiet, turpis massa vestibulum turpis, egestas faucibus nibh metus vel nunc. In hac habitasse platea dictumst. Nunc sit amet nisi quis ipsum tincidunt semper.
          Donec ac urna enim, et placerat arcu. Morbi eu laoreet justo. Nullam nec velit eu neque mattis pulvinar sed non libero. Sed sed vulputate erat. Fusce sit amet dui nibh.</p>
        <h2>Heading<a id="14"></a></h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam egestas congue nibh, vel dictum ante posuere vitae. Cras gravida massa tempor metus eleifend sed elementum tortor scelerisque. Vivamus egestas, tortor quis luctus tristique, sem velit
          adipiscing risus, et tempus enim felis in massa. Morbi viverra, nisl quis rhoncus imperdiet, turpis massa vestibulum turpis, egestas faucibus nibh metus vel nunc. In hac habitasse platea dictumst. Nunc sit amet nisi quis ipsum tincidunt semper.
          Donec ac urna enim, et placerat arcu. Morbi eu laoreet justo. Nullam nec velit eu neque mattis pulvinar sed non libero. Sed sed vulputate erat. Fusce sit amet dui nibh.</p>
        <h2>Heading<a id="15"></a></h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam egestas congue nibh, vel dictum ante posuere vitae. Cras gravida massa tempor metus eleifend sed elementum tortor scelerisque. Vivamus egestas, tortor quis luctus tristique, sem velit
          adipiscing risus, et tempus enim felis in massa. Morbi viverra, nisl quis rhoncus imperdiet, turpis massa vestibulum turpis, egestas faucibus nibh metus vel nunc. In hac habitasse platea dictumst. Nunc sit amet nisi quis ipsum tincidunt semper.
          Donec ac urna enim, et placerat arcu. Morbi eu laoreet justo. Nullam nec velit eu neque mattis pulvinar sed non libero. Sed sed vulputate erat. Fusce sit amet dui nibh.</p>
        <h2>Heading<a id="16"></a></h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam egestas congue nibh, vel dictum ante posuere vitae. Cras gravida massa tempor metus eleifend sed elementum tortor scelerisque. Vivamus egestas, tortor quis luctus tristique, sem velit
          adipiscing risus, et tempus enim felis in massa. Morbi viverra, nisl quis rhoncus imperdiet, turpis massa vestibulum turpis, egestas faucibus nibh metus vel nunc. In hac habitasse platea dictumst. Nunc sit amet nisi quis ipsum tincidunt semper.
          Donec ac urna enim, et placerat arcu. Morbi eu laoreet justo. Nullam nec velit eu neque mattis pulvinar sed non libero. Sed sed vulputate erat. Fusce sit amet dui nibh.</p>
        <h2>Heading<a id="17"></a></h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam egestas congue nibh, vel dictum ante posuere vitae. Cras gravida massa tempor metus eleifend sed elementum tortor scelerisque. Vivamus egestas, tortor quis luctus tristique, sem velit
          adipiscing risus, et tempus enim felis in massa. Morbi viverra, nisl quis rhoncus imperdiet, turpis massa vestibulum turpis, egestas faucibus nibh metus vel nunc. In hac habitasse platea dictumst. Nunc sit amet nisi quis ipsum tincidunt semper.
          Donec ac urna enim, et placerat arcu. Morbi eu laoreet justo. Nullam nec velit eu neque mattis pulvinar sed non libero. Sed sed vulputate erat. Fusce sit amet dui nibh.</p>
        <h2>Heading<a id="18"></a></h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam egestas congue nibh, vel dictum ante posuere vitae. Cras gravida massa tempor metus eleifend sed elementum tortor scelerisque. Vivamus egestas, tortor quis luctus tristique, sem velit
          adipiscing risus, et tempus enim felis in massa. Morbi viverra, nisl quis rhoncus imperdiet, turpis massa vestibulum turpis, egestas faucibus nibh metus vel nunc. In hac habitasse platea dictumst. Nunc sit amet nisi quis ipsum tincidunt semper.
          Donec ac urna enim, et placerat arcu. Morbi eu laoreet justo. Nullam nec velit eu neque mattis pulvinar sed non libero. Sed sed vulputate erat. Fusce sit amet dui nibh.</p>
        <h2>Heading<a id="19"></a></h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam egestas congue nibh, vel dictum ante posuere vitae. Cras gravida massa tempor metus eleifend sed elementum tortor scelerisque. Vivamus egestas, tortor quis luctus tristique, sem velit
          adipiscing risus, et tempus enim felis in massa. Morbi viverra, nisl quis rhoncus imperdiet, turpis massa vestibulum turpis, egestas faucibus nibh metus vel nunc. In hac habitasse platea dictumst. Nunc sit amet nisi quis ipsum tincidunt semper.
          Donec ac urna enim, et placerat arcu. Morbi eu laoreet justo. Nullam nec velit eu neque mattis pulvinar sed non libero. Sed sed vulputate erat. Fusce sit amet dui nibh.</p>
        <h2>Heading<a id="20"></a></h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam egestas congue nibh, vel dictum ante posuere vitae. Cras gravida massa tempor metus eleifend sed elementum tortor scelerisque. Vivamus egestas, tortor quis luctus tristique, sem velit
          adipiscing risus, et tempus enim felis in massa. Morbi viverra, nisl quis rhoncus imperdiet, turpis massa vestibulum turpis, egestas faucibus nibh metus vel nunc. In hac habitasse platea dictumst. Nunc sit amet nisi quis ipsum tincidunt semper.
          Donec ac urna enim, et placerat arcu. Morbi eu laoreet justo. Nullam nec velit eu neque mattis pulvinar sed non libero. Sed sed vulputate erat. Fusce sit amet dui nibh.</p>
      </div>
      <!-- /.col-md-9 -->

      <!-- Sidebar -->
      <div id="sidebar" class="col-xs-3">
        <div id="sidenav" role="navigation">
          <h3>Contents</h3>
          <ul class="nav nav-pills nav-stacked">
            <li><a class="list-group-item" href="#1">Heading</a>
            </li>
            <li><a class="list-group-item" href="#2">Heading</a>
            </li>
            <li><a class="list-group-item" href="#3">Heading</a>
            </li>
            <li><a class="list-group-item" href="#4">Heading</a>
            </li>
            <li><a class="list-group-item" href="#5">Heading</a>
            </li>
            <li><a class="list-group-item" href="#6">Heading</a>
            </li>
            <li><a class="list-group-item" href="#7">Heading</a>
            </li>
            <li><a class="list-group-item" href="#8">Heading</a>
            </li>
            <li><a class="list-group-item" href="#9">Heading</a>
            </li>
            <li><a class="list-group-item" href="#10">Heading</a>
            </li>
            <li><a class="list-group-item" href="#11">Heading</a>
            </li>
            <li><a class="list-group-item" href="#12">Heading</a>
            </li>
            <li><a class="list-group-item" href="#13">Heading</a>
            </li>
            <li><a class="list-group-item" href="#14">Heading</a>
            </li>
            <li><a class="list-group-item" href="#15">Heading</a>
            </li>
            <li><a class="list-group-item" href="#16">Heading</a>
            </li>
            <li><a class="list-group-item" href="#17">Heading</a>
            </li>
            <li><a class="list-group-item" href="#18">Heading</a>
            </li>
            <li><a class="list-group-item" href="#19">Heading</a>
            </li>
            <li><a class="list-group-item" href="#20">Heading</a>
            </li>
          </ul>
        </div>
      </div>
      <!-- /.col-md-3 -->

    </div>
  </div>
  <!-- /.row -->

  <hr>

  <!-- Footer -->
  <footer id="footer">
    <div class="row">
      <div class="col-lg-12">
        <p>Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer
          Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer</p>
      </div>
    </div>
  </footer>

</div>

Bootstrap3：自动剪辑贴side-nav

Bootstrap 3: Auto-clip affixed side-nav

javascript

jquery

twitter-bootstrap-3

affix