固定顶部导航栏隐藏其下的内容答案

【问题标题】：Fixed-top navbar hiding content under it固定顶部导航栏隐藏其下的内容
【发布时间】：2019-09-11 16:20:36
【问题描述】：

我有一个使用引导库创建的固定顶部导航栏。我从顶部填充了主体以避免将内容隐藏在其下方。但是，例如，当我单击“关于我们”的链接时，其顶部将隐藏在导航栏下方。无论如何要修复它，以便单击链接时关于我们的内容就在导航栏下方？

body{
  padding: 3em 0;
}

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
          integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<nav class="navbar bg-dark navbar-light fixed-top">
  <div class="container-fluid">
      <a href="#about-us">About Us</a>
  </div>
</nav>
<div class="content">
  <div id="about-us">
       <h1>About Us</h1>
      <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
  <div>
      <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
  </div>

  </div>
</div>

【问题讨论】：

你能展示一个有效的例子吗？显然，您的代码摘录缺少正文和其他内容，但我假设这是因为您正在简化示例。你能把它放在小提琴或类似的东西里吗？
你的代码实际上做了你想做的事。也许还有其他问题。
您会看到，当您单击“关于我们”链接时，
会向上滚动并隐藏在导航栏下方。我希望链接的
保持在导航栏下方
Using scrollIntoView with a fixed position header的可能重复
嗨，Talha - 只是跟进。你的问题得到了满意的回答吗？如果我可以提供更多帮助，请在我的答案下方添加评论，或编辑您的问题以澄清您还想知道什么。否则，如果您可以选择“最佳答案”（通过单击答案旁边的复选标记）来结束问题，那就太好了。如果没有答案提供有用的信息，请添加您自己的答案并选择它作为最佳答案。 （这样做你不会得到任何分数，但这会解决问题。）谢谢！

标签： html css bootstrap-4

【解决方案1】：

使用

#about-us {
  padding: 3em 0;
}

改为

body {
  padding: 3em 0;
}

【讨论】：

【解决方案2】：

这是一种潜在的解决方案，它还添加了“平滑滚动”功能，同时解决了您的问题。

这里的秘诀是使用 jQuery .animate() 方法以及偏移量，将页面滑动到所需的部分（减去偏移值）。所以，你需要：

类名，任意类名
将该类名添加到菜单链接（请注意，对于此特定代码示例，菜单链接必须是锚标记）
在下面的演示中使用 jQuery 代码来监视对具有该 className 的元素的点击，然后使用 jQuery animate 来跳转到具有对应于 href 属性的 ID 的部分。解决您的问题的魔法是偏移量。

除了$('a.jtkirk') 作为您的选择/触发器，您还可以使用$('a[href^=#]')（这表示：对于所有带有以# 字符开头的href 的a 标记）——但这不适用于 StackOverflow 的堆栈 sn-ps，因此我无法对其进行测试/演示。但是使用类来识别平滑滚动链接并没有什么坏处。 同样，您可以为班级选择任何名称，我使用了柯克上尉的绰号以便于查看。

演示：

$('a.jtkirk').click(function(e){
    e.preventDefault();
    var kirkoffset = 50;
    $('html,body').animate({
        scrollTop: $(this.hash).offset().top - kirkoffset
    }, 700);
});

body{
  padding: 3em 0;
}

/*  Below not necessary - only for demo layout */
nav .scroll{
  display:flex;
  justify-content:flex-start !important;
}

nav .scroll a {margin-right:15px;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
          integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<nav class="navbar bg-dark navbar-light fixed-top scroll">
  <div class="container-fluid scroll">
      <a class="jtkirk" href="#about-us">About Us</a>
      <a class="jtkirk" href="#nuther-one">Nuther One</a>
  </div>
</nav>
<div class="content">
  <div id="about-us">
       <h1>About Us</h1>
      <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
      </p>
  </div>
  <div>
      <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
      </p>
  </div>
  <div id="nuther-one">
       <h1>Nuther One</h1>
      <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
      </p>
  </div>

</div>

【讨论】：

【解决方案3】：

您可以使用带有:before 元素的:target 选择器和导航栏的height。

body {
  padding: 3em 0;
}

:target::before {
    display: block;
    height: 40px;
    margin-top: -40px;
    content: '';
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
      integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<nav class="navbar bg-dark navbar-light fixed-top">
    <div class="container-fluid">
        <a href="#about-us">About Us</a>
    </div>
</nav>
<div class="content">
    <div id="another">
        <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
    </div>
    <div id="about-us">
        <h1>About Us</h1>
        <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
        <div>
            <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
          irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
        </div>
    </div>
</div>

【讨论】：

会向上滚动并隐藏在导航栏下方。我希望链接的 保持在导航栏下方

演示：

会向上滚动并隐藏在导航栏下方。我希望链接的
保持在导航栏下方