ScrollSpy

Question from StackExchange on how to set the ScrollSpy to an object other then the body.

by Nicholas Pappas

HTML

<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<!-- Navigation Bar -->
<div class="navbar navbar-inverse navbar-static-top" id="top" role="banner">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <i class="fa fa-bars fa-lg"></i>
      </button>
      <a class="navbar-brand" href="/"><i class="fa fa-flag"></i> Here</a>
    </div>

    <nav class="navbar-collapse collapse" role="navigation">
      <ul class="nav navbar-nav">
        <li><a href="/">Home</a></li>
        <li><a href="/menu1">Menu 1</a></li>
        <li><a href="/menu2">Menu 2</a></li>
        <li><a href="/menu3">Menu 3</a></li>
        <li><a href="/menu4">Menu 4</a></li>  
      </ul>
    </nav>
  </div>
</div>

<!-- Header -->
<div class="jumbotron hidden-print">
  <div class="container">
    <h1><i class="fa fa-book"></i>&nbsp;&nbsp;Page 1</h1>
    <p>You are here.</p>
  </div>
</div>

<div class="container">
  <div class="row">
    <div class="col-md-2" role="complementary">
      <div class="hig-sidebar hidden-print hidden-sm hidden-xs" role="complementary">
        <ul class="nav hig-sidenav">
          <li spy="overview">
            <a href="#overview">Overview</a>
            <ul class="nav">
              <li spy="suboverview"><a href="#suboverview">Subsection</a></li>
              <li><a href="">blah</a></li>
            </ul>
          </li>
          <li spy="typography"><a href="#typography">Color and Typography</a></li>
          <li spy="graphics"><a href="#graphics">Icons and Graphics</a></li>
          <li spy="grid"><a href="#grid">Grid</a></li>
          <li spy="elements"><a href="#elements">UI Elements</a></li>
        </ul>
      </div>
    </div>

    <div class="col-md-10 col-xs-12" role="main">
      <div class="hig-section">
        <h1 id="overview"...

CSS

@import url('http://getbootstrap.com/dist/css/bootstrap.css');

.hig-sidebar.affix {
  position: fixed;
  top: 0;
  width: 100%; }
.hig-sidebar .nav > .active > a,
.hig-sidebar .nav > .active:hover > a,
.hig-sidebar .nav > .active:focus > a {
  color: green;
  background-color: transparent;
  border-left: 2px solid #be0f34; }
.hig-sidebar .nav > li > a {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: #999;
  padding: 4px 10px;
  padding-right: 0px; }
.hig-sidebar .nav .nav > li > a {
  padding-top: 1px;
  padding-bottom: 1px;
  padding-left: 20px;
  font-size: 12px;
  font-weight: 400; }

JavaScript

$('.hig-sidebar').affix({
  offset: {
    top: function() { return $('.navbar-static-top').outerHeight() + $('.jumbotron').outerHeight(); }
  }
});