3

在我的 Rails 应用程序中，我正在尝试构建一个简单的常见问题解答页面，该页面有一个侧边栏，当您单击某个主题时，它会向下移动到该问题。

所以我在侧边栏中的一段代码看起来像：

<li><a href="#work">How does it work?</a></li>

然后我有一个与 id="work" 匹配的 h2。

当我对其进行测试时，它一直在超调，我认为是因为它从页面顶部开始显示内容，该页面被 Bootstrap 中的导航栏隐藏。解决此问题的最佳方法是什么？

4

2 回答 2

5

有同样的问题。这是我想出的：

// listen for click events originating from elements with href starting with #
$('body').on('click.scroll-adjust', '[href^="#"]', function (e) {
  var $nav

  // make sure navigation hasn't already been prevented
  if ( e && e.isDefaultPrevented() ) return

  // get a reference to the offending navbar
  $nav = $('div.navbar')

  // check if the navbar is fixed
  if ( $nav.css('position') !== "fixed" ) return

  // listen for when the browser performs the scroll
  $(window).one('scroll', function () {
    // scroll the window up by the height of the navbar
    window.scrollBy(0, -$nav.height())
  });

});
于 2012-08-04T01:10:40.307 回答
1

我纯粹使用 CSS/HTML 标记解决了这个问题——这可能对你有用，也可能对你不起作用，具体取决于你的结构。

首先，我在导航栏中引用的每个元素都是一个 div，因为我的页面被分成几个部分，每个 dav 都有类container，所以页面结构是：

<body>
 <div class="navbar navbar-fixed-top">
   <div class="navbar-inner">
     <div class="container">  
       <ul class="nav">
         <li class="active"><a href="#one">one</a></li>
         <li><a href="#two">two</a></li>
         <li><a href="#three">three</a></li>
         <li><a href="#four">four</a></li>
         <li><a href="#five">five</a></li>
       </ul>
     </div>
   </div>
 </div>

 <div class="container" id="one">  
   <h1>One</h1>
 </div>

 ...

 <div class="container" id="five">  
   <h1>Five</h1>
 </div>

文档建议您将正文填充至少 40px 以补偿导航栏，这很好 - 但它只会在页面位于顶部时将内容向下推。正如你所做的那样，我发现从静态导航栏到页面#锚点的任何链接都在页面上太高了。

我的解决方案是填充每个锚定元素的顶部，因此我将以下 CSS 添加到我的页面 CSS（在标准引导程序和响应式样式表之间加载）：

.container {
  padding-top:  60px;
}

这显然在我的页面上的每个部分之间增加了空间，但这在我的布局中实际上很有用。

值得记住的是，因为顶部也有这个填充，所以不需要在<body>标签的顶部应用填充。

于 2012-11-26T14:23:09.347 回答