导航到同一页面上的 div 部分无法正常工作？

Question

修复 header 与页面锚点重叠 - 我有一个包含 5 个 link 的顶部栏，在同一页面上单击时重定向到 div，但每当我单击在 link 它重定向到完全相同的 div 但在 div 的中间内容不在起始位置也 div 内容在 header 我猜？

PS：我已经检查了 Whosebug 的这些解决方案，但没有结果！

P.S 页面太大，所以我只显示了很少的代码来生成输出，因此格式不正确。对于完整的网页和输出，请也检查 working page

    WRONG (but the common behavior):         CORRECT:
+---------------------------------+      +---------------------------------+
| BAR///////////////////// header |      | //////////////////////// header |
+---------------------------------+      +---------------------------------+
| Here is the rest of the Text    |      | BAR                             |
| ...                             |      |                                 |
| ...                             |      | Here is the rest of the Text    |
| ...                             |      | ...                             |
+---------------------------------+      +---------------------------------+

window.onscroll = function() {
  scrollFunction()
};

function scrollFunction() {
  if (document.body.scrollTop > 1 || document.documentElement.scrollTop > 1) {
    document.getElementById("bar").style.top = "90px";
  } else {
    document.getElementById("bar").style.top = "150px";
  }
}

.main-navigation-top {
  position: fixed;
  top: 0px;
  background: #fff;
  z-index: 999999;
  width: 100%;
}
 

.about-inner {
  position: relative;
  top: 90px;
}

.pg-content .container-fluid {
  padding: 60px;
}

.pg-bar .container-fluid {
  padding: 0px 60px;
}

.sub-nav {
  background: #FC453E;
  padding: 10px;
}

.pg-bar {
  position: fixed;
  top: -50px;
  width: 100%;
  display: block;
  transition: top 0.3s;
  z-index: 2;
}

.scrollbar-colored {
  scrollbar-color: #eee;
}


/* .pg-bar ul {
    list-style-type: none;
    display: flex;
    justify-content: space-between;
    padding-left: 0px;
    margin-bottom: 0px;
    overflow: auto;
} */

.d-flex {
  display: flex;
}

.mt-2,
.my-2 {
  margin-top: 0.5rem !important;
}

.mt-3,
.my-3 {
  margin-top: 1rem !important;
}

.mt-4,
.my-4 {
  margin-top: 1.5rem !important;
}

.mb-3,
.my-3 {
  margin-bottom: 1rem !important;
}

.ml-2,
.mx-2 {
  margin-left: 0.5rem !important;
}

.ml-3 {
  margin-left: 1rem !important;
}

.mt-5,
.my-5 {
  margin-top: 3rem !important;
}

.font-weight-bolder {
  font-weight: bolder !important;
}

.w-100 {
  width: 100% !important;
}

.sub-nav {
  display: block;
  width: auto;
}

.sub-nav dl {
  padding: 2px 0;
  display: flex;
  justify-content: space-between;
}

.sub-nav>dl {
  white-space: nowrap;
  margin-bottom: 0;
  overflow-x: auto;
}

.sub-nav dd {
  display: inline-block;
  margin-bottom: 0px;
}

.sub-nav a {
  display: inline-block;
  color: #fff;
  text-decoration: none;
}

.pg-bar li a {
  color: #fff;
  text-decoration: none;
}

.pg-content {
  padding: 100px 0px;
}

.pg-btn {
  padding: 8px 10px;
  border: none;
  background: #FC453E;
  color: #fff;
  border-radius: 2px;
  font-size: 20px;
}

.pg-content p {
  font-family: poppins;
  font-size: 14px;
  margin-bottom: 0px;
}

.pg-content h6 {
  color: #FC453E;
  font-size: 18px;
}

.home-content span {
  color: #FC453E;
  font-family: 'Poppins';
}

.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
  color: #fff;
  background-color: #FC453E;
}

.nav-tabs .nav-link {
  color: #000;
  background-color: #eee;
  border-radius: 0px;
  padding: 8px 40px;
}

.col-12 {
  position: relative;
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
}

.tab-accrd h5 {
  font-size: 20px;
}

.p-0 {
  padding: 0px;
}

.nav-tabs {
  border: none;
}

.flug-i i {
  font-size: 30px;
  color: #FC453E;
}

.flug-i h4 {
  margin-bottom: 0px;
  text-transform: uppercase;
  margin-left: 10px;
  font-family: 'Poppins';
  margin-top: 0px;
  font-size: 24px;
}

.ml-1,
.mx-1 {
  margin-left: 0.25rem !important;
}

.flug-cont {
  margin-left: 40px;
}

.flug-cont i {
  color: #eab177;
  position: relative;
  top: 3px;
}

.die {
  padding: 20px;
  background: #eee;
}

.ter h5 {
  text-transform: uppercase;
  font-family: poppins;
  font-size: 20px;
}

.ter td {
  font-family: poppins;
  font-size: 14px;
}

.ter .table thead th {
  border-bottom: 2px solid #fff;
}

.ter .table td,
.table th {
  border-top: 1px solid #fff;
}

.ter tbody tr {
  background: #eee;
}

.star {
  position: relative;
  background: #eee;
  padding: 15px 20px;
}

.star i {
  position: absolute;
  content: '';
  top: -12px;
  color: #FC453E;
  font-size: 25px;
  left: 0px
}

.name {
  padding: 10px;
  background: #eeeeee;
}

.more {
  color: #FC453E;
  border: 1px solid #FC453E;
  background: transparent;
  padding: 5px 15px;
  text-transform: uppercase;
  font-weight: 500;
  font-size: 14px;
}

.resie i {
  position: relative;
  top: 3px;
  color: #FC453E;
}

html {
  scroll-behavior: smooth;
}

.nav-tabs>li>a {
  border-radius: 0px;
}

.nav-tabs>li>a {
  margin-right: 5px;
}


/* nav-tab */

.panel.with-nav-tabs .nav-tabs {
  border-bottom: none;
}

.panel.with-nav-tabs .nav-justified {
  margin-bottom: -1px;
}

.tab-content {
  padding: 0px;
  box-shadow: none;
}

.panel-body {
  padding: 0px;
}

.panel-group .panel+.panel {
  margin-top: 0px;
}

.panel-group .panel {
  border-bottom: 1px solid #fc453e;
  border-radius: 0px;
  cursor: pointer;
}


/********************************************************************/


/*** PANEL DEFAULT ***/

.with-nav-tabs.panel-default .nav-tabs>li>a,
.with-nav-tabs.panel-default .nav-tabs>li>a:hover,
.with-nav-tabs.panel-default .nav-tabs>li>a:focus {
  color: #777;
}

.with-nav-tabs.panel-default .nav-tabs>.open>a,
.with-nav-tabs.panel-default .nav-tabs>.open>a:hover,
.with-nav-tabs.panel-default .nav-tabs>.open>a:focus,
.with-nav-tabs.panel-default .nav-tabs>li>a:hover,
.with-nav-tabs.panel-default .nav-tabs>li>a:focus {
  color: #777;
  background-color: #ddd;
  border-color: transparent;
}

.with-nav-tabs.panel-default .nav-tabs>li.active>a,
.with-nav-tabs.panel-default .nav-tabs>li.active>a:hover,
.with-nav-tabs.panel-default .nav-tabs>li.active>a:focus {
  color: #fff;
  background-color: #fc453e;
  border-color: #ddd;
  border-bottom-color: transparent;
}

.with-nav-tabs.panel-default .nav-tabs>li.dropdown .dropdown-menu {
  background-color: #f5f5f5;
  border-color: #ddd;
}

.with-nav-tabs.panel-default .nav-tabs>li.dropdown .dropdown-menu>li>a {
  color: #777;
}

.with-nav-tabs.panel-default .nav-tabs>li.dropdown .dropdown-menu>li>a:hover,
.with-nav-tabs.panel-default .nav-tabs>li.dropdown .dropdown-menu>li>a:focus {
  background-color: #ddd;
}

.with-nav-tabs.panel-default .nav-tabs>li.dropdown .dropdown-menu>.active>a,
.with-nav-tabs.panel-default .nav-tabs>li.dropdown .dropdown-menu>.active>a:hover,
.with-nav-tabs.panel-default .nav-tabs>li.dropdown .dropdown-menu>.active>a:focus {
  color: #fff;
  background-color: #555;
}

<link href="https://kit-pro.fontawesome.com/releases/v5.15.4/css/pro.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<!---------- Main Header code starts here--------->
<div class="container-fluid main-navigation-top" style="padding: 15px 60px 15px;">
    <div class="row">
        <nav class="navbar navbar-inverse navbar-static-top">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                    <img src="../img/menu-bar.png" width="78">
                </button>
                <a class="navbar-brand" href="/index.html"><img src="../img/logo.png" width="32"> BCT-Touristik <span>Äthiopien Studienreisen</span></a>
            </div>

            <div id="navbar" class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li class="dropdown megamenu">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Äthiopien Reisen <span class="caret"></span></a> 
                        <div class="clearfix"></div>
                    </li>
                    <li class="dropdown megamenu">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Afrikareisen <span class="caret"></span></a>
                        <ul class="dropdown-menu" style="display: none;">
                            <div class="container">
                                <div class="col-lg-3">
                                    <h3>Äthiopien</h3>
                                </div> 
                    </li>
                  
                  
                    <li class="dropdown megamenu">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Kontakt &amp; Anmeldung <span class="caret"></span></a> 
               
                    </li>
                </ul>
            </div>
        </nav>
    </div>
</div>

<!---------- Top Bar navigation with 5 links to div code starts here--------->

<section class="pg-bar" id="bar">
  <div class="container-fluid">
    <div class="row">
      <div class="col-lg-8 col-sm-12">
        <div class="sub-nav">
          <dl class="scrollbar-colored">
            <dd><a href="#Home">Reise</a></dd>
            <dd><a href="#About">Reiseroute</a></dd>
            <dd><a href="#Service">Programm</a></dd>
            <dd><a href="#Carrer">Leistungen</a></dd>
            <dd><a href="#Contact">Termine & Preise</a></dd>

          </dl>
        </div>
      </div>
    </div>
  </div>
</section>


<!---------- content for 5 links to div code starts here--------->

<section class="pg-content">

  <!-- this line will also changed start here -->
  <div class="container-fluid">
    <!--change end here  -->
    <div class="row">
      <div class="col-lg-8">
        <div class="row">
          <div class="col-lg-8">
            <div class="home-content" id="Home">
              <h1 class="text-uppercase">Äthiopien Intensiv</h1>
              <button class="mt-2 pg-btn">Studienreise Äthiopien</button>
              <button class="ml-2 mt-2 pg-btn">24 Tage</button>
              <p class="mt-3">Wenn Sie auch zu der Sorte Mensch gehören, die dem Massentourismus abgeschworen haben und lieber atypische Reiseziele besuchen, dann liegen Sie mit dieser Reise nach Äthiopien völlig richtig. Denn im Gegensatz zu planmäßig errichteten Touristenzentren
                erleben Sie hier ein Land in seiner ursprünglichen Form. Land und Leute werden Ihnen unverändert entgegen treten. Dieses Erlebnis ist einzigartig und wird sicherlich einen bleibenden Eindruck hinterlassen.
              </p>
              <p class="mt-3">Auf dieser gut durchdachten Rundreise wird ihnen das Land Äthiopien und die dort vorhandene Kultur sowie atemberaubende Landschaften näher gebracht. Erleben sie Natur und historische Bauten, die bisher vom Massentourismus verschont geblieben
                sind. Neue Abenteuer warten auf Sie!</p>

              <h6 class="text-uppercase mt-4 mb-3">HIGHLIGHTS DIESER REISE:</h6>
              <div class="resie d-flex">
                <i class="fas fa-check-circle"></i>
                <p class="ml-2"><span>Lalibela</span>- Besuch der 11 Felsenkirchen </p>
              </div>
              <div class="resie d-flex">
                <i class="fas fa-check-circle"></i>
                <p class="ml-2"><span>Aksum</span>- Auf den Spuren von Indianer Jones zur "Bundeslade" </p>
              </div>
              <div class="resie d-flex">
                <i class="fas fa-check-circle"></i>
                <p class="ml-2"><span>Afrika Legenden </span>- Usprung des blauen Nil </p>
              </div>
              <div class="resie d-flex">
                <i class="fas fa-check-circle"></i>
                <p class="ml-2"><span>Mago Nationalpark </span>- Zu Besuch bei dem Mursi </p>
              </div>

              <h6 class="text-uppercase mt-4 mb-3">VORTEILE BEI DER BCT-TOURISTIK:</h6>
              <div class="resie d-flex">
                <i class="fas fa-check-circle"></i>
                <p class="ml-2"><span>Über 25 Jahre Erfahrung als Afrika Spezialist</span> </p>
              </div>
              <div class="resie d-flex">
                <i class="fas fa-check-circle"></i>
                <p class="ml-2"><span>Deutscher Studienreiseleiter der BCT-Touristik</span> </p>
              </div>
              <div class="resie d-flex">
                <i class="fas fa-check-circle"></i>
                <p class="ml-2"><span>Äthiopien Reisen in kleiner Gruppe</span></p>
              </div>
              <div class="resie d-flex">
                <i class="fas fa-check-circle"></i>
                <p class="ml-2"><span>Alle Programmpukte, Transfer und Ausflüge im Preis inklusive</span></p>
              </div>
              <div class="resie d-flex">
                <i class="fas fa-check-circle"></i>
                <p class="ml-2"><span>Umfangreiches Informationsmaterial bei allen Studienreisen</span></p>
              </div>

            </div>

          </div>

          <div class="col-lg-4">
            <img src="image/bctontour.png" class="img img-responsive">
          </div>
          <div class="col-lg-12 mt-5">
            <button class="w-100 text-uppercase font-weight-bolder pg-btn" id="About">Reiseroute</button>
          </div>
          <div class="col-lg-12 mt-5">
            <img src="image/route-aethiopien-mursi_24tage.jpg" class="img img-responsive">
          </div>
          
           <div class="col-lg-12 mt-5">
              <button class="w-100 text-uppercase font-weight-bolder pg-btn" id="Service" >Programme</button>
            </div>

          <div class="col-lg-12 mt-5">
            <button class="w-100 text-uppercase font-weight-bolder pg-btn" id="Carrer">Leistungen</button>
          </div>
          <div class="col-lg-6 mt-5">
            <div class="flug-i d-flex">
              <i class="fas fa-check-circle"></i>
              <h4>FLÜGE</h4>

            </div>
            <div class="flug-cont d-flex">
              <i class="fal fa-angle-right"></i>
              <p class="ml-1">Hinflug Frankfurt – Addis Abeba</p>
            </div>
         
          </div>
          <div class="col-lg-6 mt-5">
            <div class="flug-i d-flex">
              <i class="fas fa-check-circle"></i>
              <h4>Hotel</h4>

            </div>
            <div class="flug-cont d-flex">
              <i class="fal fa-angle-right"></i>
              <p class="ml-1">Hotelunterbringung in 3* und 4* Hotels (entspricht Mittelklasse-Hotels in Deutschland):
              </p>
            </div>
          
            <div class="flug-cont d-flex">
              <i class="fal fa-angle-right"></i>
              <p class="ml-1">1 Übernachtung in Hawassa</p>
            </div>
            <div class="flug-cont d-flex">
              <i class="fal fa-angle-right"></i>
              <p class="ml-1">2 Übernachtungen in Arba Minch</p>
            </div>
            <div class="flug-cont d-flex">
              <i class="fal fa-angle-right"></i>
              <p class="ml-1">2 Übernachtungen in Turmi</p>
            </div>
          </div>
          <div class="col-lg-6 mt-5">
            <div class="flug-i d-flex">
              <i class="fas fa-check-circle"></i>
              <h4 class="text-wrap">VERPFLEGUNG</h4>

            </div>
            
            <div class="flug-cont d-flex">
              <i class="fal fa-angle-right"></i>
              <p class="ml-1">Abendunterhaltung in Lalibela mit Kaffee-Zeremonie</p>
            </div>
          </div>
          <div class="col-lg-6 mt-5">
             
            <div class="flug-cont d-flex">
              <i class="fal fa-angle-right"></i>
              <p class="ml-1">Ethnologisches Museum Addis Abeba</p>
            </div>
          </div>
          <div class="col-lg-6 mt-5">
            <div class="flug-i d-flex">
              <i class="fas fa-check-circle"></i>
              <h4>Nordäthiopien entdecken</h4> 
            </div> 
            <div class="flug-cont d-flex">
              <i class="fal fa-angle-right"></i>
              <p class="ml-1">Blaue Nil Fälle</p>
            </div>
            <div class="flug-cont d-flex">
              <i class="fal fa-angle-right"></i>
              <p class="ml-1">Debreh Libanos Kloster</p>
            </div>
          </div>

          <div class="col-lg-6 mt-5">
            <div class="flug-i d-flex">
              <i class="fas fa-check-circle"></i>
              <h4>Süden Äthiopiens</h4>

            </div> 
            <div class="flug-cont d-flex">
              <i class="fal fa-angle-right"></i>
              <p class="ml-1">Mago Nationalpark</p>
            </div>

          </div>

          <div class="col-lg-6 mt-5">
            <div class="flug-i d-flex">
              <i class="fas fa-check-circle"></i>
              <h4>ABC Pluspunkte</h4>

            </div>
 
            <div class="flug-cont d-flex">
              <i class="fal fa-angle-right"></i>
              <p class="ml-1">Informationsmaterial</p>
            </div>
            <div class="flug-cont d-flex">
              <i class="fal fa-angle-right"></i>
              <p class="ml-1">Auslandskrankenversicherung</p>
            </div>

          </div>
          
           <div class="col-lg-12 mt-5">
              <button class="w-100 text-uppercase font-weight-bolder pg-btn" id="Contact">Termine & preise</button>
            </div>

</section>

Answer 1

您可以简单地：

display: flex;

在该项目上。

window.onscroll = function() {
  scrollFunction()
};

function scrollFunction() {
  if (document.body.scrollTop > 1 || document.documentElement.scrollTop > 1) {
    document.getElementById("bar").style.top = "90px";
  } else {
    document.getElementById("bar").style.top = "150px";
  }
}

.main-navigation-top {
  position: fixed;
  top: 0px;
  background: #fff;
  z-index: 999999;
  width: 100%;
}
 

.about-inner {
  position: relative;
  top: 90px;
}

.pg-content .container-fluid {
  padding: 60px;
}

.pg-bar .container-fluid {
  padding: 0px 60px;
}

.sub-nav {
  background: #FC453E;
  padding: 10px;
}

.pg-bar {
  position: fixed;
  top: -50px;
  width: 100%;
  display: block;
  transition: top 0.3s;
  z-index: 2;
}

.scrollbar-colored {
  scrollbar-color: #eee;
}


/* .pg-bar ul {
    list-style-type: none;
    display: flex;
    justify-content: space-between;
    padding-left: 0px;
    margin-bottom: 0px;
    overflow: auto;
} */

.d-flex {
  display: flex;
}

.mt-2,
.my-2 {
  margin-top: 0.5rem !important;
}

.mt-3,
.my-3 {
  margin-top: 1rem !important;
}

.mt-4,
.my-4 {
  margin-top: 1.5rem !important;
}

.mb-3,
.my-3 {
  margin-bottom: 1rem !important;
}

.ml-2,
.mx-2 {
  margin-left: 0.5rem !important;
}

.ml-3 {
  margin-left: 1rem !important;
}

.mt-5,
.my-5 {
  margin-top: 3rem !important;
}

.font-weight-bolder {
  font-weight: bolder !important;
}

.w-100 {
  width: 100% !important;
}

.sub-nav {
  display: block;
  width: auto;
}

.sub-nav dl {
  padding: 2px 0;
  display: flex;
  justify-content: space-between;
}

.sub-nav>dl {
  white-space: nowrap;
  margin-bottom: 0;
  overflow-x: auto;
}

.sub-nav dd {
  display: inline-block;
  margin-bottom: 0px;
}

.sub-nav a {
  display: inline-block;
  color: #fff;
  text-decoration: none;
}

.pg-bar li a {
  color: #fff;
  text-decoration: none;
}

.pg-content {
  padding: 100px 0px;
}

.pg-btn {
  padding: 8px 10px;
  border: none;
  background: #FC453E;
  color: #fff;
  border-radius: 2px;
  font-size: 20px;
}

.pg-content p {
  font-family: poppins;
  font-size: 14px;
  margin-bottom: 0px;
}

.pg-content h6 {
  color: #FC453E;
  font-size: 18px;
}

.home-content span {
  color: #FC453E;
  font-family: 'Poppins';
}

.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
  color: #fff;
  background-color: #FC453E;
}

.nav-tabs .nav-link {
  color: #000;
  background-color: #eee;
  border-radius: 0px;
  padding: 8px 40px;
}

.col-12 {
  position: relative;
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
}

.tab-accrd h5 {
  font-size: 20px;
}

.p-0 {
  padding: 0px;
}

.nav-tabs {
  border: none;
}

.flug-i i {
  font-size: 30px;
  color: #FC453E;
}

.flug-i h4 {
  margin-bottom: 0px;
  text-transform: uppercase;
  margin-left: 10px;
  font-family: 'Poppins';
  margin-top: 0px;
  font-size: 24px;
}

.ml-1,
.mx-1 {
  margin-left: 0.25rem !important;
}

.flug-cont {
  margin-left: 40px;
}

.flug-cont i {
  color: #eab177;
  position: relative;
  top: 3px;
}

.die {
  padding: 20px;
  background: #eee;
}

.ter h5 {
  text-transform: uppercase;
  font-family: poppins;
  font-size: 20px;
}

.ter td {
  font-family: poppins;
  font-size: 14px;
}

.ter .table thead th {
  border-bottom: 2px solid #fff;
}

.ter .table td,
.table th {
  border-top: 1px solid #fff;
}

.ter tbody tr {
  background: #eee;
}

.star {
  position: relative;
  background: #eee;
  padding: 15px 20px;
}

.star i {
  position: absolute;
  content: '';
  top: -12px;
  color: #FC453E;
  font-size: 25px;
  left: 0px
}

.name {
  padding: 10px;
  background: #eeeeee;
}

.more {
  color: #FC453E;
  border: 1px solid #FC453E;
  background: transparent;
  padding: 5px 15px;
  text-transform: uppercase;
  font-weight: 500;
  font-size: 14px;
}

.resie i {
  position: relative;
  top: 3px;
  color: #FC453E;
}

html {
  scroll-behavior: smooth;
}

.nav-tabs>li>a {
  border-radius: 0px;
}

.nav-tabs>li>a {
  margin-right: 5px;
}


/* nav-tab */

.panel.with-nav-tabs .nav-tabs {
  border-bottom: none;
}

.panel.with-nav-tabs .nav-justified {
  margin-bottom: -1px;
}

.tab-content {
  padding: 0px;
  box-shadow: none;
}

.panel-body {
  padding: 0px;
}

.panel-group .panel+.panel {
  margin-top: 0px;
}

.panel-group .panel {
  border-bottom: 1px solid #fc453e;
  border-radius: 0px;
  cursor: pointer;
}


/********************************************************************/


/*** PANEL DEFAULT ***/

.with-nav-tabs.panel-default .nav-tabs>li>a,
.with-nav-tabs.panel-default .nav-tabs>li>a:hover,
.with-nav-tabs.panel-default .nav-tabs>li>a:focus {
  color: #777;
}

.with-nav-tabs.panel-default .nav-tabs>.open>a,
.with-nav-tabs.panel-default .nav-tabs>.open>a:hover,
.with-nav-tabs.panel-default .nav-tabs>.open>a:focus,
.with-nav-tabs.panel-default .nav-tabs>li>a:hover,
.with-nav-tabs.panel-default .nav-tabs>li>a:focus {
  color: #777;
  background-color: #ddd;
  border-color: transparent;
}

.with-nav-tabs.panel-default .nav-tabs>li.active>a,
.with-nav-tabs.panel-default .nav-tabs>li.active>a:hover,
.with-nav-tabs.panel-default .nav-tabs>li.active>a:focus {
  color: #fff;
  background-color: #fc453e;
  border-color: #ddd;
  border-bottom-color: transparent;
}

.with-nav-tabs.panel-default .nav-tabs>li.dropdown .dropdown-menu {
  background-color: #f5f5f5;
  border-color: #ddd;
}

.with-nav-tabs.panel-default .nav-tabs>li.dropdown .dropdown-menu>li>a {
  color: #777;
}

.with-nav-tabs.panel-default .nav-tabs>li.dropdown .dropdown-menu>li>a:hover,
.with-nav-tabs.panel-default .nav-tabs>li.dropdown .dropdown-menu>li>a:focus {
  background-color: #ddd;
}

.with-nav-tabs.panel-default .nav-tabs>li.dropdown .dropdown-menu>.active>a,
.with-nav-tabs.panel-default .nav-tabs>li.dropdown .dropdown-menu>.active>a:hover,
.with-nav-tabs.panel-default .nav-tabs>li.dropdown .dropdown-menu>.active>a:focus {
  color: #fff;
  background-color: #555;
}

<link href="https://kit-pro.fontawesome.com/releases/v5.15.4/css/pro.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<!---------- Main Header code starts here--------->
<div class="container-fluid main-navigation-top" style="padding: 15px 60px 15px;">
    <div class="row">
        <nav class="navbar navbar-inverse navbar-static-top">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                    <img src="../img/menu-bar.png" width="78">
                </button>
                <a class="navbar-brand" href="/index.html" style="display: flex;"><img src="../img/logo.png" width="32"> BCT-Touristik <span>Äthiopien Studienreisen</span></a>
            </div>

            <div id="navbar" class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li class="dropdown megamenu">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Äthiopien Reisen <span class="caret"></span></a> 
                        <div class="clearfix"></div>
                    </li>
                    <li class="dropdown megamenu">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Afrikareisen <span class="caret"></span></a>
                        <ul class="dropdown-menu" style="display: none;">
                            <div class="container">
                                <div class="col-lg-3">
                                    <h3>Äthiopien</h3>
                                </div> 
                    </li>
                  
                  
                    <li class="dropdown megamenu">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Kontakt &amp; Anmeldung <span class="caret"></span></a> 
               
                    </li>
                </ul>
            </div>
        </nav>
    </div>
</div>

<!---------- Top Bar navigation with 5 links to div code starts here--------->

<section class="pg-bar" id="bar">
  <div class="container-fluid">
    <div class="row">
      <div class="col-lg-8 col-sm-12">
        <div class="sub-nav">
          <dl class="scrollbar-colored">
            <dd><a href="#Home">Reise</a></dd>
            <dd><a href="#About">Reiseroute</a></dd>
            <dd><a href="#Service">Programm</a></dd>
            <dd><a href="#Carrer">Leistungen</a></dd>
            <dd><a href="#Contact">Termine & Preise</a></dd>

          </dl>
        </div>
      </div>
    </div>
  </div>
</section>


<!---------- content for 5 links to div code starts here--------->

<section class="pg-content">

  <!-- this line will also changed start here -->
  <div class="container-fluid">
    <!--change end here  -->
    <div class="row">
      <div class="col-lg-8">
        <div class="row">
          <div class="col-lg-8">
            <div class="home-content" id="Home">
              <h1 class="text-uppercase">Äthiopien Intensiv</h1>
              <button class="mt-2 pg-btn">Studienreise Äthiopien</button>
              <button class="ml-2 mt-2 pg-btn">24 Tage</button>
              <p class="mt-3">Wenn Sie auch zu der Sorte Mensch gehören, die dem Massentourismus abgeschworen haben und lieber atypische Reiseziele besuchen, dann liegen Sie mit dieser Reise nach Äthiopien völlig richtig. Denn im Gegensatz zu planmäßig errichteten Touristenzentren
                erleben Sie hier ein Land in seiner ursprünglichen Form. Land und Leute werden Ihnen unverändert entgegen treten. Dieses Erlebnis ist einzigartig und wird sicherlich einen bleibenden Eindruck hinterlassen.
              </p>
              <p class="mt-3">Auf dieser gut durchdachten Rundreise wird ihnen das Land Äthiopien und die dort vorhandene Kultur sowie atemberaubende Landschaften näher gebracht. Erleben sie Natur und historische Bauten, die bisher vom Massentourismus verschont geblieben
                sind. Neue Abenteuer warten auf Sie!</p>

              <h6 class="text-uppercase mt-4 mb-3">HIGHLIGHTS DIESER REISE:</h6>
              <div class="resie d-flex">
                <i class="fas fa-check-circle"></i>
                <p class="ml-2"><span>Lalibela</span>- Besuch der 11 Felsenkirchen </p>
              </div>
              <div class="resie d-flex">
                <i class="fas fa-check-circle"></i>
                <p class="ml-2"><span>Aksum</span>- Auf den Spuren von Indianer Jones zur "Bundeslade" </p>
              </div>
              <div class="resie d-flex">
                <i class="fas fa-check-circle"></i>
                <p class="ml-2"><span>Afrika Legenden </span>- Usprung des blauen Nil </p>
              </div>
              <div class="resie d-flex">
                <i class="fas fa-check-circle"></i>
                <p class="ml-2"><span>Mago Nationalpark </span>- Zu Besuch bei dem Mursi </p>
              </div>

              <h6 class="text-uppercase mt-4 mb-3">VORTEILE BEI DER BCT-TOURISTIK:</h6>
              <div class="resie d-flex">
                <i class="fas fa-check-circle"></i>
                <p class="ml-2"><span>Über 25 Jahre Erfahrung als Afrika Spezialist</span> </p>
              </div>
              <div class="resie d-flex">
                <i class="fas fa-check-circle"></i>
                <p class="ml-2"><span>Deutscher Studienreiseleiter der BCT-Touristik</span> </p>
              </div>
              <div class="resie d-flex">
                <i class="fas fa-check-circle"></i>
                <p class="ml-2"><span>Äthiopien Reisen in kleiner Gruppe</span></p>
              </div>
              <div class="resie d-flex">
                <i class="fas fa-check-circle"></i>
                <p class="ml-2"><span>Alle Programmpukte, Transfer und Ausflüge im Preis inklusive</span></p>
              </div>
              <div class="resie d-flex">
                <i class="fas fa-check-circle"></i>
                <p class="ml-2"><span>Umfangreiches Informationsmaterial bei allen Studienreisen</span></p>
              </div>

            </div>

          </div>

          <div class="col-lg-4">
            <img src="image/bctontour.png" class="img img-responsive">
          </div>
          <div class="col-lg-12 mt-5">
            <button class="w-100 text-uppercase font-weight-bolder pg-btn" id="About">Reiseroute</button>
          </div>
          <div class="col-lg-12 mt-5">
            <img src="image/route-aethiopien-mursi_24tage.jpg" class="img img-responsive">
          </div>
          
           <div class="col-lg-12 mt-5">
              <button class="w-100 text-uppercase font-weight-bolder pg-btn" id="Service" >Programme</button>
            </div>

          <div class="col-lg-12 mt-5">
            <button class="w-100 text-uppercase font-weight-bolder pg-btn" id="Carrer">Leistungen</button>
          </div>
          <div class="col-lg-6 mt-5">
            <div class="flug-i d-flex">
              <i class="fas fa-check-circle"></i>
              <h4>FLÜGE</h4>

            </div>
            <div class="flug-cont d-flex">
              <i class="fal fa-angle-right"></i>
              <p class="ml-1">Hinflug Frankfurt – Addis Abeba</p>
            </div>
         
          </div>
          <div class="col-lg-6 mt-5">
            <div class="flug-i d-flex">
              <i class="fas fa-check-circle"></i>
              <h4>Hotel</h4>

            </div>
            <div class="flug-cont d-flex">
              <i class="fal fa-angle-right"></i>
              <p class="ml-1">Hotelunterbringung in 3* und 4* Hotels (entspricht Mittelklasse-Hotels in Deutschland):
              </p>
            </div>
          
            <div class="flug-cont d-flex">
              <i class="fal fa-angle-right"></i>
              <p class="ml-1">1 Übernachtung in Hawassa</p>
            </div>
            <div class="flug-cont d-flex">
              <i class="fal fa-angle-right"></i>
              <p class="ml-1">2 Übernachtungen in Arba Minch</p>
            </div>
            <div class="flug-cont d-flex">
              <i class="fal fa-angle-right"></i>
              <p class="ml-1">2 Übernachtungen in Turmi</p>
            </div>
          </div>
          <div class="col-lg-6 mt-5">
            <div class="flug-i d-flex">
              <i class="fas fa-check-circle"></i>
              <h4 class="text-wrap">VERPFLEGUNG</h4>

            </div>
            
            <div class="flug-cont d-flex">
              <i class="fal fa-angle-right"></i>
              <p class="ml-1">Abendunterhaltung in Lalibela mit Kaffee-Zeremonie</p>
            </div>
          </div>
          <div class="col-lg-6 mt-5">
             
            <div class="flug-cont d-flex">
              <i class="fal fa-angle-right"></i>
              <p class="ml-1">Ethnologisches Museum Addis Abeba</p>
            </div>
          </div>
          <div class="col-lg-6 mt-5">
            <div class="flug-i d-flex">
              <i class="fas fa-check-circle"></i>
              <h4>Nordäthiopien entdecken</h4> 
            </div> 
            <div class="flug-cont d-flex">
              <i class="fal fa-angle-right"></i>
              <p class="ml-1">Blaue Nil Fälle</p>
            </div>
            <div class="flug-cont d-flex">
              <i class="fal fa-angle-right"></i>
              <p class="ml-1">Debreh Libanos Kloster</p>
            </div>
          </div>

          <div class="col-lg-6 mt-5">
            <div class="flug-i d-flex">
              <i class="fas fa-check-circle"></i>
              <h4>Süden Äthiopiens</h4>

            </div> 
            <div class="flug-cont d-flex">
              <i class="fal fa-angle-right"></i>
              <p class="ml-1">Mago Nationalpark</p>
            </div>

          </div>

          <div class="col-lg-6 mt-5">
            <div class="flug-i d-flex">
              <i class="fas fa-check-circle"></i>
              <h4>ABC Pluspunkte</h4>

            </div>
 
            <div class="flug-cont d-flex">
              <i class="fal fa-angle-right"></i>
              <p class="ml-1">Informationsmaterial</p>
            </div>
            <div class="flug-cont d-flex">
              <i class="fal fa-angle-right"></i>
              <p class="ml-1">Auslandskrankenversicherung</p>
            </div>

          </div>
          
           <div class="col-lg-12 mt-5">
              <button class="w-100 text-uppercase font-weight-bolder pg-btn" id="Contact">Termine & preise</button>
            </div>

</section>

Answer 2

确实 header 已滚动到页面顶部并隐藏在导航栏下方。您可以在要滚动到的标题上设置 scroll-margin-top，例如scroll-margin-top: 16rem.

在您的代码中，例如：

<button class="w-100 text-uppercase font-weight-bolder pg-btn checking" id="About" style="scroll-margin-top: 16rem;">Reiseroute</button>

只需将其添加到您用于设置标题样式的 class（pg-btn？）。将 16rem 更改为适合您的值。

Answer 3

#Home,#About,#Service,#Carrer,#Contact{
     scroll-margin-top: 150px
}

试试这个

导航到同一页面上的 div 部分无法正常工作？

Navigate to a div section on same page not working properly?

javascript

html

jquery

css

twitter-bootstrap-3