CSS javascript 结合实现悬浮固定菜单效果

实现悬浮固定菜单效果需要使用CSS和JavaScript结合来操作DOM元素和改变页面样式。以下是该功能的完整攻略：

1. HTML 结构

在 HTML 中，需要定义一个包含导航栏的容器。导航栏可以放在一个无序列表（UL）中，其中每个列表项（LI）代表一个菜单项。为了实现固定悬浮的效果，需要设置导航栏容器的 position 属性为 fixed。

示例代码：

<div class="nav-container">
  <ul>
    <li><a href="#">菜单1</a></li>
    <li><a href="#">菜单2</a></li>
    <li><a href="#">菜单3</a></li>
  </ul>
</div>

2. CSS 样式

为了实现固定悬浮的效果，需要设置导航栏容器的 position 属性为 fixed。另外，导航栏容器和导航栏里的各个元素需要设置宽度、高度和边距等样式属性。

示例代码：

.nav-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 50px;
  background-color: #333;
  color: #fff;
  padding: 10px;
}

.nav-container ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-container li {
  display: inline-block;
  margin-right: 20px;
}

.nav-container a {
  color: #fff;
  text-decoration: none;
  font-weight: bold;
}

3. JavaScript 代码

悬浮固定菜单效果的实现需要 JavaScript 操作 DOM 元素，以及监听页面滚动事件。代码中先获取导航栏容器的高度，然后绑定 window 对象的滚动事件。在滚动事件的处理函数里，获取当前页面的滚动距离，通过比较滚动距离和导航栏容器高度来确定是否切换导航栏的样式。

示例代码：

window.addEventListener('scroll', function() {
  var navContainer = document.querySelector('.nav-container');
  var scrollDistance = window.pageYOffset || document.documentElement.scrollTop;

  if (scrollDistance >= navContainer.offsetHeight) {
    navContainer.classList.add('fixed');
  } else {
    navContainer.classList.remove('fixed');
  }
});

示例说明

下面是两条示例说明：

示例一

在页面加载时，导航栏应该处于文档流中并随页面一起滚动。当页面滚动到导航栏位置时，导航栏将固定在页面顶部。

示例二

在页面加载时，导航栏应该处于文档流中并随页面一起滚动。当页面滚动到导航栏位置时，导航栏将固定在页面顶部，并设置背景和字体颜色为白色，文字加粗，当滚动回到导航栏区域的范围内，导航栏将恢复原来的样式。