导航栏未在滚动时选择部分项目 - Bootstrap答案

【问题标题】：Navbar not selecting section items on scroll - Bootstrap导航栏未在滚动时选择部分项目 - Bootstrap
【发布时间】：2019-01-30 06:54:54
【问题描述】：

我使用 html5、css3 和 bootstrap 创建了一个 html 页面。问题是导航栏菜单没有突出显示/选择指向部分的项目。我希望当我向下滚动到其他部分时，导航栏应该在其菜单中自动突出显示它们。这是sn-p：

section {
  width: 100vw;
  height: 60vh;
  padding: 50px;
}

.cl_white {
  color: white;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">

<body data-spy="scroll" data-target=".navbar">
   <nav class="navbar navbar-inverse navbar-fixed-bottom">
     <ul class="nav navbar-nav">
      <li><a href="#home">Home</a></li>
      <li><a href="#work">Work</a></li>
      <li><a href="#contact">Contact Me</a></li>
     </ul>
   </nav>

   <section id="home" style="background: url(header.jpg); background-size=100% 100%;" class="text-center cl_white">
    <h1>Zeshan Sajid | Portfolio</h1>
    <p class="lead">Hey Welcome there! Let just read myselft and then contact me for your projects and tasks that you want me to finish on the basis of professinality and perfection with the blend of magical skills. You are always welcome to contact me and ask your queries, as I am available to help you all the time in this regard. Thanks. </p>
   </section>
   <section id = "work"></section>
   <section id = "contact"></section>
</body>
      
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>

【问题讨论】：

Bootstrap 3 CSS 和 Bootstrap 4 JS？

标签： jquery html css bootstrap-4

【解决方案1】：

我为平滑滚动添加了平滑行为 css，并为 p 标签提供了 100vh 高度，仅用于滚动间谍视图。

说明

您需要在正文标记中添加data-spy="scroll" data-target="#navbarNav"，并在将数据目标ID 与navbar-collapse 和button's data-target 匹配之后。

html{
  scroll-behavior: smooth;
}
p{
  height: 100vh;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">

<body data-spy="scroll" data-target="#navbarNav">
  <nav class="navbar navbar-expand-sm navbar-dark bg-dark sticky-top">
    <div class="container">
      <a class="navbar-brand" href="#"></a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link" href="#home">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#about">About</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#project">Projects</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#contact">Contact</a>
          </li>
        </ul>
      </div>
    </div>  
  </nav>
  <div>
    <h4 id="home">@fat</h4>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi expedita non fuga sint, cumque, commodi, quia iure quidem dolore repudiandae aut ducimus, at impedit. Dolore tempore esse nisi placeat reprehenderit.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis velit perferendis neque, cupiditate tempora in, facere ad voluptate! Rerum incidunt provident totam voluptate molestiae dolore distinctio eaque officiis ex facilis.</p>
    <h4 id="about">@mdo</h4>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum obcaecati ut pariatur corrupti, nisi iure tempora, consectetur impedit saepe. Distinctio soluta eos odio accusamus tempore iusto nam sunt, corporis quam.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi itaque, voluptates possimus dolorem tempora ipsam eum consectetur natus in iste odio officiis, doloribus consequuntur accusantium aut illum dicta deleniti a!</p>
    <h4 id="project">one</h4>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum sed debitis ab aspernatur itaque dignissimos ducimus quam, voluptate esse illum dolore vitae voluptatum nemo consequuntur earum molestiae. Natus, perferendis, quaerat.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate eveniet minus facere repellendus quaerat cum maxime molestiae repudiandae soluta nobis eum, fugiat, dolores reiciendis aliquam molestias nostrum, asperiores optio sequi?</p>
    <h4 id="contact">two</h4>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis eaque repellat ex modi veritatis quas. Aperiam, maxime numquam sint provident vel fugit suscipit commodi pariatur perferendis quas ipsam! Unde, neque.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere illo commodi aut quae, hic porro. Consectetur voluptate, perspiciatis amet laborum tempora ab, provident ipsam, sequi labore sunt est molestiae libero.</p>
  </div>
</body>

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>

【讨论】：

不要忘记考虑投票并通过单击右箭头检查此答案是否为您的最佳答案，谢谢！