Question

在用于引导程序的网站上，当您向下滚动时，它们右侧有一个导航菜单，当您滚动浏览这些部分时，它也会跟随您。这是如何运作的？我试图查看页面的来源，无法找到它在任何地方调用的内容或如何执行此操作。

任何帮助都会很棒。

谢谢大家。

Answer 1

我最近回答了这个问题。请在此处查看easy way navbar bootstrap

或者我把它贴在下面。

如果您正在寻找为其文档添加固定边栏（如引导程序用途），例如此处http://getbootstrap.com/javascript/#affix，请尝试以下操作：

将id="foo" data-spy="affix" data-offset-top="100" data-offset-bottom="10"添加到您想要在滚动时锁定的位置。

并在页面底部添加javascript：

<script type="text/javascript">
 $('#foo').affix({
    offset: {
      top: 100
    , bottom: function () {
        return (this.bottom = $('.footer').outerHeight(true))
      }
    }
  })
</script>
From there, you'll want to adjust the height at which you want it to lock by adjusting the 'top' elements.

For example:

<div id="foo" data-spy="affix" data-offset-top="100" data-offset-bottom="10">
  <!-- everything in here is be fixed to top -->
</div>

<script type="text/javascript">
  $('#foo').affix({
    offset: {
      top: 100
        , bottom: function () {
           return (this.bottom = $('.footer').outerHeight(true))
      }
    }
  })
</script>

Answer 2

如果您使用的是firefox或chrome，则有两种工具可以很好地使用它们内置到您的浏览器中。我正在使用chrome，所以将解释我如何在chrome中找到以下信息。 1）在chrome中加载页面并右键单击。选择“检查元素”。如果右键单击要检查的项目，它会有所帮助。 2）当开发人员工具在底部打开时，您将在左侧看到html标记。将鼠标悬停在该页面上将突出显示相应的元素。 3）右侧显示css甚至让你关闭或关闭css的某些方面，添加新规则，更改规则等... 所以，当我这样做时，我看到侧面导航栏是<ul> class=nav bs-docs-sidenav，它位于div class=bs-docs-sidebar。

一旦你有一些html或要搜索的类，你可以右键单击屏幕上的任意位置并单击查看页面源。搜索（ctrl-f）该类或最有可能在您正在寻找的位置使用的东西，看看您是否可以找到html。这就是我从http://getbootstrap.com/getting-started/抓取以下代码段的方式：

<div class="col-md-3">
          <div class="bs-docs-sidebar hidden-print" role="complementary">
            <ul class="nav bs-docs-sidenav">

                <li>
  <a href="#download">Download</a>
</li>
<li>
  <a href="#whats-included">What's included</a>
  <ul class="nav">
    <li><a href="#whats-included-precompiled">Precompiled</a></li>
    <li><a href="#whats-included-source">Source code</a></li>
  </ul>
</li>.....

Answer 3

该菜单称为词缀，您可以使用bootstrap本身来执行此操作 - 此处为其文档：http://getbootstrap.com/javascript/#affix

Answer 4

我还试图从http://getbootstrap.com复制侧面导航，但无法找到一个简单的解决方案，所以我为它创建了一个插件：

http://afeld.github.io/bootstrap-toc/

让我知道你的想法！

如何在getbootstrap.com上重新创建菜单，如右侧导航菜单

4 个答案: