CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Sajjad Tabreez
Sajjad Tabreez

Reputation: 188

jQuery smooth scroll link color change not working

I have designed a smooth scroll using jQuery. One problem I'm facing is that when I click on the navbar links, there is a flickering.

Suppose if I click on the Platform link, there is a flickering on the Why v9 link. Again when I click on the other links, there is flickering on the previous link. I'm not able to debug it.

Can someone please help me on this? It would be of great help.

$(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>

Upvotes: 0

Views: 622

Answers (4)

Ballsigno
Ballsigno

Reputation: 501

I think you can solve this problem by writing one line.

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

If it's flag, you still have problem. You click the nav menu, then you click the other nav menus until scroll is over. I think it's good that to stop animation first.

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

Upvotes: 2

mansoureh.hedayat
mansoureh.hedayat

Reputation: 645

 $(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>

Upvotes: 1

Vishal
Vishal

Reputation: 51

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>

Upvotes: 1

T.sagiv
T.sagiv

Reputation: 325

You can add a global varriable to detact if the scrolling is by clicking or by scrolling:

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

});

Upvotes: 2

Related Questions