Question

因此，在Bootstrap v3中，您只需向nav标签添加数据偏移属性，其中包含像素偏移量，在本例中为54px，

<nav data-offset="54"></nav>

但是，在Bootstrap v4中，缺少此数据偏移属性，并且不起作用。我已经浏览了v4文档，似乎找不到任何东西！我也尝试过使用data-offset和offset属性，但这些属性也不起作用。

这是导航

的html代码

<nav class="navbar navbar-light bg-faded navbar-fixed-top">
  <button type="button" data-toggle="collapse" data-target="#nav-collapse" aria-controls="#nav-collapse" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler hidden-md-up">&#9776;</button>
  <div id="nav-collapse" class="collapse navbar-toggleable-sm">
    <ul class="nav navbar-nav pull-md-right">
      <li class="nav-item"><a href="#page-top" class="nav-link page-scroll">home</a></li>
      <li class="nav-item"><a href="#about" class="nav-link page-scroll">about</a></li>
      <li class="nav-item"><a href="#services" class="nav-link page-scroll">services</a></li>
      <li class="nav-item"><a href="#productssolutions" class="nav-link page-scroll">products + solutions</a></li>
      <li class="nav-item"><a href="#contact" class="nav-link page-scroll">contact</a></li>
    </ul>
  </div>
</nav>

如何添加54px的数据偏移？有没有可以使用的替代方法，比如一个简单的脚本标记需要用几行js添加到我的html中？

Answer 1

所以我最终修复它的方法是在每个部分的顶部添加一个单独的元素;

<span class="anchor" id="SECTION"></span>
<section id="SECTION" REST OF SECTION HERE>
    ....

section元素中的id是允许滚动间谍正常工作。

并将其添加到我的css文件中;

span.anchor {
    margin-top: -54px; /* height of nav, in this case 54px */
    display: block;
    height: 54px; /* height of nav, in this case 54px */
    visibility: hidden;
    position: relative;
}

然后，嘿presto！它起作用了，这个解决方案的一个好处是它不会直观地影响任何东西，只会改变锚点。

Answer 2

您可以在所指的每个部分添加padding-top。

<a href="#section1">Section 1</a>
...
<section id="section1" class="pt-5">
   <!-- section text -->
</section>

如果填充不够大，您可以添加自己的类

.section-anchor-padding { padding-top: 54; }

如何向Bootstrap 4固定顶部响应导航栏添加数据偏移？

2 个答案: