如何在 getbootstrap.com 上重新创建类似于右侧导航菜单的菜单 [英] How to recreate menu like the right nav menu at getbootstrap.com

问题描述

在引导程序的网站上，他们在右侧有一个导航菜单，当您向下滚动时，它会保持原位，并且在您滚动浏览各个部分时也会跟随您.这是如何运作的?我试图查看页面的源代码，但在任何地方都找不到它的名称或方法.

任何帮助都会很棒.

谢谢大家.

解决方案

我最近回答了这个问题.在这里查看简单的导航栏引导程序

或者我把它粘贴在下面.

如果您想为他们的文档添加像引导程序一样的固定侧边栏，如此处所述 http://getbootstrap.com/javascript/#affix，试试这个:

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

并在页面底部添加javascript:

从那里，您需要通过调整顶部"元素来调整您希望它锁定的高度.例如:<div id="foo" data-spy="affix" data-offset-top="100" data-offset-bottom="10"><!-- 这里的所有内容都固定在顶部-->

<script type="text/javascript">$('#foo').词缀({抵消: {顶部:100，底部:函数(){返回 (this.bottom = $('.footer').outerHeight(true))}}})

On the website for bootstrap, they have a nav menu on the right side that stays in place as you scroll down, and it will also follow you as your scroll through the sections. How does this work? I have attempted to look through the page's source, and can't find what it's called anywhere or how to do it.

Any help would be great.

Thanks all.

解决方案

I answered this recently. Check it out here easy way navbar bootstrap

Or I pasted it below.

If you're looking to add the fixed sidebar like bootstrap uses for their docs, like noted here http://getbootstrap.com/javascript/#affix, try this:

Add id="foo" data-spy="affix" data-offset-top="100" data-offset-bottom="10" to the or you want to lock in place upon scroll.

and add the javascript at the bottom of your page:

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

这篇关于如何在 getbootstrap.com 上重新创建类似于右侧导航菜单的菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！