使用jquery编写右侧浮动导航菜单

以下是使用 jQuery 编写右侧浮动导航菜单的示例代码：

HTML 代码：

<div id="float-menu">
  <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 id="section1" class="section">
  <h2>Section 1</h2>
  <p>Content of section 1</p>
</div>

<div id="section2" class="section">
  <h2>Section 2</h2>
  <p>Content of section 2</p>
</div>

<div id="section3" class="section">
  <h2>Section 3</h2>
  <p>Content of section 3</p>
</div>

<div id="section4" class="section">
  <h2>Section 4</h2>
  <p>Content of section 4</p>
</div>

CSS 代码：

#float-menu {
  position: fixed;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
}

#float-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

#float-menu li {
  margin: 10px 0;
}

#float-menu a {
  display: block;
  padding: 10px;
  background-color: #ccc;
}

.section {
  height: 500px;
  margin: 50px 0;
  border: 1px solid #ccc;
}

JavaScript 代码：

$(document).ready(function() {
  // 获取目标元素的位置
  var sectionOffsets = $('.section').map(function() {
    return $(this).offset().top;
  });

  // 点击菜单项滚动到对应的位置
  $('#float-menu a').click(function() {
    var index = $(this).parent().index();
    $('html, body').animate({
      scrollTop: sectionOffsets[index]
    }, 500);
    return false;
  });

  // 滚动页面时更新菜单项的状态
  $(window).scroll(function() {
    var scrollPos = $(window).scrollTop();
    $('.section').each(function(i) {
      if (scrollPos >= sectionOffsets[i] - 100) {
        $('#float-menu li').removeClass('active');
        $('#float-menu li').eq(i).addClass('active');
      }
    });
  });
});

说明：

首先，我们定义了一个浮动菜单，它包含一些菜单项，每个菜单项对应页面上的一个区域。当用户单击菜单项时，页面将滚动到相应的区域。

我们使用 jQuery 的 `$(document).ready()` 方法来确保页面完全加载后再执行 JavaScript 代码。

在 JavaScript 代码中，我们首先获取每个区域的位置，然后在菜单项上添加单击事件处理程序，以便在单击菜单项时滚动到相应的区域。

然后，我们添加一个滚动事件处理程序，以便在滚动页面时更新菜单项的状态。当页面滚动到某个区域时，相应的菜单项将被标记为活动状态。

最后，我们使用 CSS 样式来定义浮动菜单和页面区域的样式，以实现您所需的效果。