使用jquery实现pc端侧边栏导航滑动页面时对应导航会跟着改变颜色，点击也可以跳转到对应内容

下面是一个使用 jQuery 实现的侧边栏导航滑动页面时对应导航会跟着改变颜色，点击也可以跳转到对应内容的示例代码：

HTML：

<div class="sidebar">
  <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>
    <li><a href="#section4">Section 4</a></li>
  </ul>
</div>

<div class="main-content">
  <section id="section1">
    <h2>Section 1</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </section>
  <section id="section2">
    <h2>Section 2</h2>
    <p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </section>
  <section id="section3">
    <h2>Section 3</h2>
    <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  </section>
  <section id="section4">
    <h2>Section 4</h2>
    <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
  </section>
</div>

CSS：

.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: 200px;
  height: 100%;
  background-color: #f1f1f1;
}

.main-content {
  margin-left: 200px;
}

.sidebar ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.sidebar li {
  margin: 10px 0;
}

.sidebar a {
  display: block;
  padding: 10px;
  color: #000;
  text-decoration: none;
}

.sidebar a.active {
  background-color: #ccc;
}

.main-content section {
  padding: 50px;
  margin-top: 70px;
  background-color: #fff;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

JavaScript：

$(document).ready(function() {
  // 高亮当前导航
  var sections = $('section'),
      nav = $('.sidebar'),
      nav_height = nav.outerHeight();

  $(window).on('scroll', function() {
    var cur_pos = $(this).scrollTop();

    sections.each(function() {
      var top = $(this).offset().top - nav_height,
          bottom = top + $(this).outerHeight();

      if (cur_pos >= top && cur_pos <= bottom) {
        nav.find('a').removeClass('active');
        sections.removeClass('active');

        $(this).addClass('active');
        nav.find('a[href="#'+$(this).attr('id')+'"]').addClass('active');
      }
    });
  });

  // 平滑滚动到锚点
  $('a').on('click', function(e) {
    if (this.hash !== '') {
      e.preventDefault();

      var hash = this.hash;

      $('html, body').animate({
        scrollTop: $(hash).offset().top - nav_height
      }, 800, function() {
        window.location.hash = hash;
      });
    }
  });
});

代码解释：

1. 在 HTML 中，我们使用 `<div class="sidebar">` 元素包裹侧边栏导航，使用 `<div class="main-content">` 元素包裹主要内容，每个主要内容元素使用 `<section>` 标签。
2. 在 CSS 中，我们设置侧边栏导航的样式，包括固定在左侧、背景颜色、字体颜色等。
3. 在 JavaScript 中，我们使用 `$(document).ready()` 方法等待文档加载完成，然后执行以下操作：
1. 使用 `$(window).on('scroll', function() {...})` 监听滚动事件，当页面滚动时，高亮当前导航。
2. 使用 `$('a').on('click', function(e) {...})` 监听点击事件，当点击导航链接时，平滑滚动到锚点。

这样就实现了一个简单的侧边栏导航滑动页面时对应导航会跟着改变颜色，点击也可以跳转到对应内容的功能。