用jquery实现页面滚动加点击事件对应的导航栏高亮

以下是一个使用jQuery实现的页面滚动和点击事件相应更新导航栏高亮的简单示例：

HTML结构：

<nav id="navbar">
  <ul>
    <li><a href="#section1">Section 1</a></li>
    <li><a href="#section2">Section 2</a></li>
    <li><a href="#section3">Section 3</a></li>
  </ul>
</nav>
 
<div id="section1">Section 1</div>
<div id="section2">Section 2</div>
<div id="section3">Section 3</div>

CSS样式：

#navbar ul li.active {
  color: #FF0000; /* 高亮颜色 */
}
 
.section {
  height: 500px;
  border: 1px solid #000;
  margin-top: 100px;
}

jQuery代码：

$(document).ready(function() {
  // 初始化第一个导航项为激活状态
  $('#navbar ul li:first-child').addClass('active');
 
  // 滚动事件处理
  $(window).scroll(function() {
    var scrollPos = $(document).scrollTop();
    $('#navbar ul li a').each(function() {
      var currLink = $(this);
      var refElement = $(currLink.attr("href"));
      if (refElement.position().top - 70 <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
        $('#navbar ul li').removeClass("active");
        currLink.parent().addClass("active");
      }
      else{
        currLink.parent().removeClass("active");
      }
    });
  });
 
  // 点击事件处理
  $('#navbar ul li a').click(function(e) {
    e.preventDefault(); // 阻止默认的链接跳转行为
    var target = this.hash;
    $('html, body').animate({
      scrollTop: $(target).offset().top - 70 // 减去头部的一些高度以适应导航栏
    }, 1000);
  });
});

这段代码首先为导航栏中的第一个项目添加了一个 "active" 类以表示默认激活状态。然后，当用户滚动页面时，会动态地根据页面的滚动位置来更新导航栏的 "active" 类。此外，点击导航链接时，页面会平滑滚动到对应的元素区域。