How to make the current bookmarked menu in navbar get highlighted automatically when scrolled using javascript?

user_12204388 0
Viewed 236

I am new to javascript I am trying to make the menu to be highlighted when the user scrolls to the bookmarked page. and if possible please code for smooth scrolling for the bookmarked page.

My HTML :

 <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="nav navbar-nav ml-auto aw-menu">
        <li class="nav-item item"><a class="nav-link" href="#index.html">Home</a></li>
        <li class="nav-item item"><a class="nav-link" href="#">Updates</a></li>
        <li class="nav-item item"><a class="nav-link" href="#about">About us</a></li>
        <li class="nav-item item"><a class="nav-link" href="#course">Courses</a></li>
        <li class="nav-item item"><a class="nav-link" href="#">Cells</a></li>
        <li class="nav-item item"><a class="nav-link" href="#">Library</a></li>
        <li class="nav-item item"><a class="nav-link" href="#">Placements</a></li>
        <li class="nav-item item"><a class="nav-link" href="#">Contact-us</a></li>
      </ul>
    
  </div>

My CSS:

.active{
    background-color: #64b3f4;
    font-weight: 300;
    color: white;
    border: 2px; 
}

My javascript :

$(window).on("scroll", function() {
  var currentPos = $(window).scrollTop();

  $('.nav li a').each(function() {
    var sectionLink = $(this);
    // capture the height of the navbar
    var navHeight = $('.aw-menu').outerHeight() + 1;
    var section = $(sectionLink.attr('href'));

    // subtract the navbar height from the top of the section
    if(section.position().top - navHeight  <= currentPos && sectionLink.offset().top + section.height()> currentPos) {
      $('.nav li').removeClass('active');
      sectionLink.parent().addClass('active');
    } else {
      sectionLink.parent().removeClass('active');
    }
  });        
});
css html jquery javascript
1 Answers

You are using jQuery, not pure JavaScript. I have done something similar to your question some time before. Look please.

function setScrolls() {
  $('#navbarSupportedContent a[href*="#"]:not([href="#"])').each(function(e) {
    let desiredId = $.attr(this, 'href').split('#')[1]; //get the test right from #
    let desidedOffset = $('#' + desiredId).offset().top;
    let windowTop = $(window).scrollTop();
    // set acitve class to 'li' when ve get to desiredId block - 50px
    if (desidedOffset - 50 < windowTop) {
      $(this).parent().addClass('active');
    } else {
      $(this).parent().removeClass('active');
    }
  });
  // counting the numbert of .active li
  let activeLenght = $('#navbarSupportedContent .active').length;
  // set a.cuttent for the last li.active
  if (activeLenght > 0) {
    $('#navbarSupportedContent .active a').removeClass('current');
    $('#navbarSupportedContent .active:eq('+(activeLenght-1)+')').find('a').addClass('current');
  }
}

$(document).ready(function($) {
  setScrolls();
});

$(window).on("scroll", function() {
  setScrolls();
});

// smooth scroll to desired element
$('#navbarSupportedContent a[href*="#"]').click(function(e) {
  let target = $(this).attr('href').split('#')[1];
  if ($('#' + target).length) {
    $('html, body').animate({
      scrollTop: $('#' + target).offset().top
    }, 800);
    return false;
  }
});
/* Just an example */
#navbarSupportedContent {
  position: fixed;
  left: 100px;
}

#test1 {
  height: 1000px;
  background: green;
}

#test2 {
  height: 1000px;
  background: cyan;
}

#navbarSupportedContent li.active a.current {
  color: #fab405;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>

<div class="navbar-collapse" id="navbarSupportedContent">
  <ul class="nav navbar-nav ml-auto aw-menu">
    <!--<li class="nav-item item"><a class="nav-link" href="#index.html">Home</a></li>-->
    <!-- link like this will cause the error -->
    <li class="nav-item item"><a class="nav-link" href="#test1">Home</a></li>
    <li class="nav-item item"><a class="nav-link" href="#test2">Updates</a></li>
  </ul>
</div>

<div id="test1">test1</div>

<div id="test2">test2</div>

UPDATED

Rewrited setScrolls() function a bit. It works now.

function setScrolls() {
  $('#navbarSupportedContent a[href*="#"]:not([href="#"])').each(function(e) {
    let desiredId = $.attr(this, 'href').split('#')[1]; //get the test right from #
    let desidedOffset = $('#' + desiredId).offset().top;
    let windowTop = $(window).scrollTop();
    // set acitve class to 'li' when ve get to desiredId block - 50px
    if (desidedOffset - 50 < windowTop) {
      $(this).parent().addClass('active');
    } else {
      $(this).parent().removeClass('active');
    }
  });
  // counting the numbert of .active li
  let activeLenght = $('#navbarSupportedContent .active').length;
  // set a.cuttent for the last li.active
  if (activeLenght > 0) {
    $('#navbarSupportedContent .active a').removeClass('current');
    $('#navbarSupportedContent .active:eq('+(activeLenght-1)+')').find('a').addClass('current');
  }

And don't use #index.html or anything like #xxx.xxx. It may cause the error.

user_31871270
Related