Bootstrap Scrollspy Event: activate.bs.scrollspy - Guide and Example

To add a scrollspy event in Bootstrap, you can use the activate.bs.scrollspy event provided by Bootstrap. Here's an example of how to add the event to your existing code:

$(document).ready(function() {
  // Scrollspy plugin event: activate.bs.scrollspy
  $('body').on('activate.bs.scrollspy', function() {
    var activeSection = $('.nav-pills li.active').find('a').attr('href');
    console.log(activeSection);
    // Perform any action you want based on the active section
  });

  // Initialize scrollspy
  $('body').scrollspy({
    target: '#navbar',
    offset: 50
  });

  // Click event for navigation menu
  $('#navbar a').click(function(e) {
    e.preventDefault();
    $('html, body').animate({
      scrollTop: $($.attr(this, 'href')).offset().top
    }, 1000);
    return false;
  });
});

In this example, we added an activate.bs.scrollspy event listener to the body element. When the scrollspy plugin detects a change in the active section, the event will be triggered. Inside the event handler function, you can perform any action you want based on the active section.

Note: The code provided assumes that you have already included the necessary Bootstrap and jQuery libraries.