scrollspy 导航栏在滚动后保持活动状态答案

【问题标题】：scrollspy nav bar sticks on active after scrolling awayscrollspy 导航栏在滚动后保持活动状态
【发布时间】：2020-04-07 17:02:36
【问题描述】：

我正在使用 scrollspy 导航栏，以便导航栏自动切换到用户所在的任何部分；这很好用。虽然如果我点击一个部分，例如“联系”，然后我向上滚动一个部分到“项目”，然后项目在 narbar 上变为活动状态，但联系部分也保持活动状态，即当我滚动离开时它仍然是粗体。

Navbar

从上图中可以看出，在我滚动离开后，“联系人”导航仍然处于活动状态。这发生在我点击的每个导航链接上，一旦我滚动离开我点击的导航链接保持活动状态。

谁能明白为什么？

HTML：

<nav class="navbar navbar-expand-lg navbar-dark bg-primary testnav fixed-top" id="mainNav">
  <div class="container">
    <a href="#ptop" class="navbar-brand js-scroll-trigger">CW Portfolio</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarResponsive">
      <ul class="navbar-nav mx-auto">
        <li class="nav-item"><a class="nav-link js-scroll-trigger" href="#about">About</a></li>
        <li class="nav-item"><a class="nav-link js-scroll-trigger" href="#skills">Skills</a></li>
        <li class="nav-item"><a class="nav-link js-scroll-trigger" href="#education">Education</a></li>
        <li class="nav-item"><a class="nav-link js-scroll-trigger" href="#projects">Projects</a> </li>
        <li class="nav-item"><a class="nav-link js-scroll-trigger" href="#interests">Interests</a></li>
        <li class="nav-item"><a class="nav-link js-scroll-trigger" href="#contact">Contact</a></li>
      </ul>

      <!--Search bar-->
      <form class="form-inline ml-auto">
        <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search" style="height: 37px; border-radius: 10px;">
        <button class="btn btn-light " type="submit">
          Search
        </button>
      </form>
    </div>
  </div>
</nav>

<section id="projects" style="background-color:whitesmoke;">
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <h2 style="text-align: center;"> Projects </h2>
        <br>
        <br>
        <br>


        text


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

<section id="interests" style="background-color:whitesmoke;">
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <h2 style="text-align: center;"> Interests & Achievements </h2>
        <br>
        <br>
        <br>


        text


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

<section id="contact">
  <div class="container">
    <h2 style="text-align: center;"> Contact Me </h2>
    <br>
    <br>
    <br>

    <div class="row ">

      <div class="col-lg-4 ">
        <div class="text-center p-4 shadow">
          <div class="contact-icons">
            <i class="fas fa-home"></i>
            <br>
          </div>
          <div>
            <br>
            <h4>Address</h4>
            <br>
            <p>xxx</p>
          </div>
          <br>
        </div>
        <br>
      </div>
      <br>

      <div class="col-lg-4 ">
        <div class="text-center p-4 shadow">
          <div class="contact-icons">
            <i class="fas fa-phone-square-alt"></i>
            <br>
          </div>
          <div>
            <br>
            <h4>xxx</h4>
            <br>
            <p>xxx</p>
            <br>

          </div>
          <br>
        </div>
        <br>
      </div>
      <br>

      <div class="col-lg-4 ">
        <div class="text-center p-4 shadow">
          <div class="contact-icons">
            <i class="fas fa-envelope"></i>
            <br>
          </div>
          <div>
            <br>
            <h4>Email</h4>
            <br>
            <p>
              <a href="mailto:name@email.com">
                xxx
              </a>
            </p>
            <br>

          </div>
          <br>
        </div>
        <br>
      </div>
      <br>

    </div>


    <div class="row d-flex">


      <div class="col-md-5" style="float: none; margin: 0 auto; margin-top: 50px;">
        <form action="#" class="bg-light p-4 p-md-5 contact-form">
          <div class="form-group">
            <input type="text" class="form-control" placeholder="Your Name">
          </div>
          <div class="form-group">
            <input type="text" class="form-control" placeholder="Your Email">
          </div>
          <div class="form-group">
            <input type="text" class="form-control" placeholder="Subject">
          </div>
          <div class="form-group">
            <textarea name="" id="" cols="30" rows="7" class="form-control" placeholder="Message"></textarea>
          </div>
          <div class="form-group">
            <input type="submit" value="Send Message" class="btn btn-primary py-3 px-5">
          </div>
        </form>
      </div>



      <div class="col-md-7 d-felx">
        <div id="map" style="height: 550px; width: 100%; margin-top:50px; "></div>
      </div>


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

CSS：

.testnav a {
  font-weight: bold;
}

.testnav a:hover {}

.testnav a.active {
  text-decoration: underline;


}

section {
  padding: 150px 0;
}

header {
  padding: 156px 0 100px;
}

.it-icons a {
  display: inline-block;
  height: 3.5rem;
  width: 3.5rem;
  background-color: #4582EC;
  color: #fff !important;
  border-radius: 100%;
  text-align: center;
  font-size: 1.3rem;
  line-height: 3.5rem;
  margin-right: 1rem;
}

.it-icons a:hover {
  transform: scale(1.2) rotate(20deg);
  background-color: skyblue;
}

.tu-icon a:hover {
  transform: rotate(5deg);
}


.os-icons a {
  display: inline-block;
  height: 3.5rem;
  width: 3.5rem;
  background-color: #4582EC;
  color: #fff !important;
  border-radius: 100%;
  text-align: center;
  font-size: 1.5rem;
  line-height: 3.5rem;
  margin-right: 1rem;
}

.os-icons a:hover {
  transform: scale(1.3) rotate(20deg);
  background-color: skyblue;
}


.proj-icons li {
  display: inline-block;
  height: 2.5rem;
  width: 2.5rem;
  background-color: #4582EC;
  color: #fff !important;
  border-radius: 100%;
  text-align: center;
  font-size: 1.0rem;
  line-height: 2.5rem;
  margin-right: 1rem;
}

.proj-icons a:hover {
  transform: scale(1.3) rotate(20deg);
  background-color: skyblue;
}




.tabs .nav-tabs>li,
.tabs .nav-pills>li {
  float: none;
  display: inline-block;
  margin-bottom: 10px;
  width: 140px;
  border: 1px solid #000000;
  padding: 5px 5px;
}

.tabs .nav-tabs {
  text-align: center;
  border-bottom: 0;
  margin-bottom: 20px;
}

.tabs .nav-tabs li:not(:last-child) {
  margin-right: 10px;

}

.tabs .nav-tabs li a {
  text-transform: capitalize;
  font-size: 20px;

  border-radius: 0;
  transition: all .3s ease;
  font-weight: 600;
  color: #4582EC;
  font-family: "Source Sans Pro", sans-serif;

}

.tabs .nav-tabs li a:hover {
  text-decoration: underline;
  color: #4582EC;

}

.tabs .nav-tabs li a.active {
  text-decoration: underline;
  color: #4582EC;

}




.service-box {
  position: relative;
  width: 100%;
}

.service-box .contents {
  margin-left: 30px;
}



.tab-content {
  position: relative;
  float: left;
  width: 100%;
  z-index: 99;
}

.service-box {
  position: relative;
  width: 100%;
}

.service-box .section-title h3 {
  position: relative;
  font-size: 32px;
  line-height: 42px;
  font-weight: 700;
  padding-bottom: 20px;
  margin-bottom: 45px;
  color: #000;
  text-transform: uppercase;
}

.service-box .section-title h3:before {
  position: absolute;
  left: 0px;
  content: '';
  bottom: 0px;
  background: #333333;
  height: 1px;
  width: 55px;

}



.progress .progress-bar>span {
  position: relative;
  height: 100%;
}

.progress .progress-bar>span>* {
  position: absolute;
  top: 0;
  transition: opacity .3s ease-out;
}

.progress .grade {
  opacity: 0;
}

.progress:hover .grade {
  opacity: 1;
}

.progress:hover .percentage {
  opacity: 0;
}


.dev-icons {
  font-size: 2.5rem;
}

.dev-icons .list-inline-item i:hover {
  color: #4582EC;
  transform: scale(1.3);

}

.contact-icons {
  color: #4582EC;
  font-size: 3.5rem;
}



.footer {
  background: #000000;
  color: #fff;
}


.footer a {
  color: rgb(238, 238, 238);
  font-size: medium;
}

用于scrollspy 和smoothscroll 的Javascript：

(function($) {
  "use strict"; // Start of use strict
  //smooth-scrolling
  $('a.js-scroll-trigger[href*="#"]:not([href="#"])').click(function() {
    if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
      if (target.length) {
        $('html, body').animate({
          scrollTop: (target.offset().top - 56)
        }, 1000, "easeInOutExpo");
        return false;
      }
    }
  });

  //close responsive menu
  $('.js-scroll-trigger').click(function() {
    $('.navbar-collapse').collapse('hide');
  });


  //scrollspy
  $('body').scrollspy({
    target: '#mainNav',
    offset: 56
  });
})(jQuery);


$('#myModal').on('shown.bs.modal', function() {
  $('#myInput').trigger('focus')
})

【问题讨论】：

标签： javascript html css twitter-bootstrap

【解决方案1】：

您附加的 css 没有显示任何可以描述 .nav-link 的类。我知道它与引导程序相关的问题（建议也提及它）。所以你的 a 类回退到

.testnav a {
  font-weight: bold;
}

【讨论】：

感谢您的回复。你是说上面的css有问题吗？我点击的导航链接似乎卡在颜色上：白色，而不是粗体（整个导航栏应该一直是粗体）
我说你应该为 '.nav-link' 创建默认的非活动类来描述你的链接看起来如何正常