Question

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

因此，侧边栏中的一段代码如下所示：

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

然后我有一个匹配的h2，id =“work”。

当我测试它时，它会保持过度，我认为因为它显示的内容从页面顶部开始，这是由Bootstrap中的导航栏隐藏的。解决这个问题的最佳方法是什么？

Answer 1

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

// 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())
  });

});

Answer 2

我使用CSS / HTML标记完全修复了这个问题 - 根据您的结构，这可能适用于您，也可能不适用。

首先，我在Navbar中引用的每个元素都是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>标记的顶部应用填充。

如何在Bootstrap导航栏标题中使用HTML ID链接？

2 个答案: