时间戳

首页 > 解决方案 > jQuery平滑滚动链接颜色更改不起作用

javascript - jQuery平滑滚动链接颜色更改不起作用

问题描述

我使用 jQuery 设计了一个平滑滚动。我面临的一个问题是，当我单击navbar链接时，会出现闪烁。

假设如果我单击Platform链接，链接上会闪烁Why v9。当我再次单击其他链接时，上一个链接上会闪烁。我无法调试它。

有人可以帮我吗？这会有很大帮助。

$(document).ready(function() {
  $('.nav-item').click(function() {
    $(".nav-item").removeClass('active');
    $(this).addClass('active');
    $('html, body').animate({
      scrollTop: $($(this).children().attr('href')).offset().top
    }, 800);
    return false;
  });

  //Active Link
  $(window).scroll(function() {
    var scrollbarLocation = $(this).scrollTop();
    $('.nav-link').each(function() {
      var sectionOffset = $($(this).attr('href')).offset().top;

      if (sectionOffset <= scrollbarLocation) {
        $(this).parent().addClass('active');
        $(this).parent().siblings().removeClass('active');
      }
    })
  })
});
.navbar-nav {
  font-size: 18px;
  font-weight: bold;
}

.navbar-light .navbar-brand {
  color: #111;
}

.navbar-light .navbar-nav .nav-link {
  color: #111;
}

/* navbar css code */

.navbar ul.navbar-nav li.nav-item a:hover,
.navbar ul.navbar-nav li.nav-item.active a {
  color: #89c353;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
  <div class="container">
    <a class="navbar-brand" href="#">
        Logo
      </a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#section1">Why v9
              <span class="sr-only">(current)</span>
            </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#section2">Platform</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#section3">Process</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#section4">Benefits</a>
        </li>
      </ul>
      <form class="form-inline my-2 my-lg-0 feedback">
        <button class="btn btn-outline-success my-2 my-sm-0" type="submit">LOREM IPSUM</button>
      </form>
    </div>
  </div>
</nav>
<div id="section1" style="background:#d1d1d1; height:800px;"></div>
<div id="section2" style="background:#f0f0f0; height:800px;"></div>
<div id="section3" style="background:#d1d1d1; height:800px;"></div>
<div id="section4" style="background:#f0f0f0; height:800px;"></div>

标签： javascriptjqueryhtmlcss

解决方案

如果滚动是通过单击或滚动，您可以添加一个全局变量来检测：

 $(document).ready(function () {
var clickScroll = false; //ADDED

    $('.nav-item').click(function () {
    clickScroll = true; //ADDED
        $(".nav-item").removeClass('active');
        $(this).addClass('active');
        $('html, body').animate({
            scrollTop: $($(this).children().attr('href')).offset().top
        }, 800, function(){
            clickScroll = false; //After the animation is finished set the varriable back to false
        });
        return false;
    });

    //Active Link

    $(window).scroll(function () {
        var scrollbarLocation = $(this).scrollTop();
        //console.log(scrollbarLocation);
        $('.nav-link').each(function () {

            var sectionOffset = $($(this).attr('href')).offset().top;

            if (sectionOffset <= scrollbarLocation && !clickScroll) { //ADDED
                $(this).parent().addClass('active');
                $(this).parent().siblings().removeClass('active');
            }
        })
    })

});

推荐阅读