Question

我正在使用bootstrap 3.1和scroll-spy在侧边栏中实现目录（TOC）。它通常效果很好，但有时我有足够的页面内容，TOC太长而无法完全呈现在视口中。所以我用溢出y：100％将高度调整为100％，这样用户仍然可以至少滚动整个TOC。

然而，当用户向下滚动页面时，突出显示的元素＆＃34;滚动＆＃39;关闭TOC的可见视图，问题是，一旦用户滚动到TOC中突出显示的页面已经不再可见，我怎样才能将TOC内容与页面一起滚动？

<div id='sidebar', style="height: 100%; overflow-y: auto">
  <div id='toc' data-offset-top='250' data-spy='affix'>
    <ul class='nav'>
      <li class='active'><a href="#toc-title">Example</a></li>
      <li><a href="#toc-title">Example 2</a></li>
      <!-- Lots more links here -->
    </ul>
  </div>
</div>

Answer 1

最简单的方法是安装jquery pluging animatescroll：http://plugins.compzets.com/animatescroll/然后使用以下内容：

$('#sidebar').on('activate.bs.scrollspy', function () {
  item = $('#toc').find(".active").first();
  item.animatescroll({element: '#toc', padding:20});
});

这将使活动的目录行可见。每次新项目变为活动状态时都会触发activate.bs.scrollspy，并且animatescroll调用会将其从顶部移动到（在这种情况下）20px。

Bootstrap 3.1附加滚动间谍内容在使用溢出时保持可见

1 个答案: