Question

我有一个使用引导程序库创建的固定顶部导航栏。我从顶部填充了主体，以避免隐藏其下面的内容。但是，例如，当我单击“关于我们”的链接时，其顶部将隐藏在导航栏下方。反正有什么办法可以解决，当单击链接时，关于我们的内容就位于导航栏的下方？

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>

Answer 1

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

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

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

您可能还可以使用$('a.jtkirk')（而不是$('a[href^=#]')作为选择/触发）（它表示： 对于以a href开头的href的所有a-tag # char ），但这不适用于StackOverflow的堆栈摘要，因此我无法对其进行测试/演示。但是使用类来标识平滑滚动链接没有任何危害。 同样，您可以为班级选择任何名称，我使用上尉柯克的绰号使它很容易看到。

演示：

$('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>

Answer 2

使用

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

代替

body {
  padding: 3em 0;
}

Answer 3

您可以将:target选择器与导航栏:before中的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>

固定顶部导航栏隐藏内容

3 个答案:

演示：