Bootstrap 3: Auto-clip affixed side-nav

Question

I've been playing around with this for some time but couldn't manage to get it working or find a similar question here.

Here is the fiddle.

We have an affixed side navigation containing a variable number of links. When the number of links get big, the side-nav goes beyond the available height. I would like to clip it off vertically based on available height (excluding the footer when it is in the view). I mean a scroll-bar should appear when the items are clipped.

Has anyone worked on a similar issue? I would really appreciate if you share your experience. And please let me know if it's not a reasonable design :)

I include some code here to make s.o. happy:

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;
}

score 0 · Accepted Answer · answered Mar 06 '15 at 17:22

Tricky because the element is position fixed. Try modifying your .affix class:

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

Example:

/* 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>

That was great! I didn't know about the `bottom` property. I'm trying to adapt your answer to my main (responsive) pages, but do you know how I can prevent the side-nav overlapping the footer? — mrmashal, Mar 07 '15 at 08:36
This is tricky, see http://stackoverflow.com/questions/6794000/fixed-position-but-relative-to-container. Bootstrap affix accepts a bottom offset, which could be the height of your footer. Otherwise you can supply a function to dynamically calculate the bottom offset. http://getbootstrap.com/javascript/#affix-options — Jon Surrell, Mar 07 '15 at 09:52

Bootstrap 3: Auto-clip affixed side-nav

1 Answers1