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

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()方法以及偏移量，将页面滑动到所需的部分（减去偏移量值） 。 因此，您需要：

1. 类名，任何类名

2. 将该类名称添加到菜单链接中（请注意，对于此特定的代码示例，菜单链接必须是锚标记）

3. 在下面的演示中使用jQuery代码来监视具有该className的元素的点击，然后使用jQuery动画来向下滑动到ID对应于href属性的部分。 解决您的问题的法宝是补偿。

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

DEMO：

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