2

我一直在尝试使用这个问题的答案来定位 sidenav 。目前，我可以通过以下方式将菜单位置固定到页面：

<div style="position: fixed" ..>
  ..
</div>

或将其添加到相应的 css 规则中。它工作正常，但位置在 jumbotron 副标题之后开始，并在我滚动时保持在那里。当我向下滚动时，我希望它不要覆盖页面顶部的 jumbotron 并移动到页面顶部的固定位置（就像在文档页面中一样，除了我不关心活动的亮点）

我试图复制文档的源代码并docs.css在页面中添加文件，但由于某种原因它不起作用。我怎样才能做到这一点？

编辑

这里有一张图说清楚

在此处输入图像描述

4

1 回答 1

2

这里有一些让你开始的东西：http: //jsfiddle.net/panchroma/s9XpJ/

我使用了非常有趣 的词缀行为，并为您提供了很多选择。

我的示例中的重要内容是在我指定要监视的 div 的 HTML 中 

<div "span3" id="side-nav" data-spy="affix" data-offset-top="200">
 <!-- nav here -->
</div>

并指定 data-offset-top ，这是在附加 div 之前需要滚动的距离。

类词缀将在添加时添加到 div 中，因此在 CSS 中我已经指定了接下来会发生什么。 

#side-nav.affix{
top:10px;
}

您通常需要在页面上重新定位附加的 div，因为默认情况下，引导程序会将其位置定义为固定，从而使其脱离正常流程。

我还使用媒体请求添加了一些 CSS 来微调视点变窄时发生的情况。Bootstrap 站点上的示例删除了最窄屏幕的侧导航的附加行为。我在这里重复了一遍。

祝你好运！

于 2013-01-29T18:41:56.407 回答