jQuery平滑滾動鏈接顏色更改不起作用

Question

我設計了使用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> 

Answer 1

如果滾動是通過單擊或滾動，則可以添加一個全局變量以進行處理：

 $(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');
            }
        })
    })

});

Answer 2

我認為您可以通過編寫一行來解決此問題。

$(window).scroll(function () {
    // ADD
    if ($('html, body').is(':animated')) { return; }

如果它是標志，則您仍然有問題。 單擊導航菜單，然后單擊其他導航菜單，直到滾動結束。 我認為最好先停止動畫。

$('html, body').stop().animate({~

Answer 3

Add this in HTML

<script type="text/javascript">
// The function actually applying the offset
function offsetAnchor() {
  if (location.hash.length !== 0) {
    window.scrollTo(window.scrollX, window.scrollY - 60);
  }
}

// Captures click events of all <a> elements with href starting with #
$(document).on('click', 'a.nav-link[href^="#"]', function(event) {
  // Click events are captured before hashchanges. Timeout
  // causes offsetAnchor to be called after the page jump.
  window.setTimeout(function() {
    offsetAnchor();
  }, 0);
});

// Set the offset when entering page with hash present in the url
window.setTimeout(offsetAnchor, 0);
</script>

Answer 4

  $(document).ready(function () { $('.nav-item').click(function () { $(this).prev().hide('fast').show('fast').hide('fast').show('fast').hide('fast').show('fast'); $(".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; } 

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Test</title> <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> <body> <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> </body> </html>