vue 页面中有上中下三个组件,如何做到让中间那个组件滑到顶部时吸附在顶部不动

要实现让中间组件滑动到顶部并吸附在顶部不动的效果，可以使用 CSS 的 position 属性和 JavaScript 监听滚动事件来实现。

• 首先，在中间组件的 CSS 样式中设置 position: fixed; 和 top: 0; 来固定组件在顶部位置。这样当滚动页面时，中间组件会一直保持在页面顶部。
• 然后，在页面中添加一个监听滚动事件的 JavaScript 事件处理程序。在事件处理程序中，检查中间组件的位置是否小于或等于页面滚动条的位置。如果是，则为中间组件添加一个类名来使其固定在顶部。否则，则从中间的组件中删除该类名，将其还原到其原本的位置。
  下面是示例代码：

HTML：

<div id="app">
  <div class="header"></div>
  <div class="middle"></div>
  <div class="footer"></div>
</div>

CSS：

.middle {
  position: relative;
}

.middle.fixed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}

JavaScript：

const middleComponent = document.querySelector('.middle');

window.addEventListener('scroll', () => {
  if (middleComponent.getBoundingClientRect().top <= 0) {
    middleComponent.classList.add('fixed');
  } else {
    middleComponent.classList.remove('fixed');
  }
});

此代码会检查中间组件的位置是否小于或等于页面滚动条的位置。如果是，则为中间组件添加一个 fixed 类名，如果不是，则从中间组件中删除该类名以将其还原到原本的位置。