如何将HTML ID链接与Bootstrap navbar-header一起使用？ [英] How can I use HTML ID links with the Bootstrap navbar-header?

问题描述

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

In my rails application I'm trying to build a simple FAQ page that has a sidebar where when you click on a topic, it moves down to that question.

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

So a piece of my code in the sidebar looks like:

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

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

And then I have a matching h2 with the id="work".

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

It keeps overshooting when I test it out, I think because it's showing the content starting at the very top of the page, which is hidden by the navbar in Bootstrap. What's the best way to remedy this?

推荐答案

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

Had the same issue. Here's what I came up with:

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

});

这篇关于如何将HTML ID链接与Bootstrap navbar-header一起使用？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！