Question

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

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>

Answer 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>

导航栏未在滚动条上选择节项目-Bootstrap

1 个答案: