为什么我的Bootstrap侧边栏重叠我的页脚？使用stickynavbar.js

Question

当我的Bootstrap侧边栏中有一定数量的项目时，侧边栏与页脚内容重叠。我不能只是更改页脚顶部边距或给侧边栏底部边距。这些都不能解决重叠问题。另外，我使用的是stickyNavbar.js，这可能是造成叠加问题的原因。如果是这样，这可以通过确定侧边栏何时激活并向页脚添加边距来解决？我如何检测到这一点并使用StickyNavbar.js进行此更改？ http://www.jozefbutko.com/stickynavbar/

以下是最终问题的图片：

HTML：

<div class="container" id="main-content" >
<div class="row">
  <div class="col-sm-12">
    <div class="col-sm-4">
        <div id="sidebar" class="hidden-xm" data-spy="affix" data-offset-top="100">
            <nav class="leftnav">
                <ul class="nav nav-pills nav-stacked">
                    <li><a href="#/:introContent.asp">Jobs@IU</a></li>
                    <li><a href="#/:introContent.asp">Recruitment & Outreach</a></li>
                    <li><a href="#/:introContent.asp">The Hiring Process</a>
                        <ul>
                            <li><a href="#/:introContent.asp">Pre-posting steps</a></li>
                            <li><a href="#/:introContent.asp">Posting process</a></li>
                            <li><a href="#/:introContent.asp">Hiring proposals</a></li>
                            <li><a href="#/:introContent.asp">Closing the posting</a></li>
                        </ul>
                    </li>
                    <li><a href="#/:introContent.asp">Temporary Hiring Process</a></li>
                    <li><a href="#/:introContent.asp">Student Employment</a></li>
                    <li><a href="#/:introContent.asp">Related Resources</a>
                        <ul>
                            <li><a href="#/:introContent.asp">Employee Policies</a></li>
                            <li><a href="#/:introContent.asp">PeopleAdmin</a></li>
                        </ul>
                    </li>
                </ul>
            </nav>
        </div>
    </div>
    <div class="col-sm-8 ajaxContent">
    <div ng-view> </div>
    </div>
      </div>

补充工具栏CSS：

无，使用bootstrap中的默认样式

页脚CSS：

   .footerspan{ background-color:#4b3b32; padding-bottom: 50px; margin-top: 50px; }