如何检测Vue中元素是否处于sticky状态并动态切换底部边框？

要实现仅当sticky头部处于固定状态时显示底部边框，你需要通过JavaScript监听滚动事件来判断头部的sticky状态，再动态切换样式。以下是具体实现步骤：

1. 修改模板结构 #

给粘性头部添加ref用于获取DOM元素，同时绑定动态类名控制边框显示：

<v-navigation-drawer
  v-if="drawerNodeData"
  class="nav-drawer"
  width="408px"
  dark
  color="#212121"
  v-model="drawerNode"
  absolute
  temporary
>
  <div class="node-drawer">
    <!-- 添加ref和动态class -->
    <div 
      class="sticky_header" 
      ref="stickyHeader"
      :class="{ 'sticky-active': isStickyActive }"
    >
      <div class="close-actor-panel">
        <span></span>
        <v-btn icon size="0.8em" @click.stop="drawerNode = false">
          <v-icon>mdi-close</v-icon>
        </v-btn>
      </div>
      <v-list-item class="title-and-nb-of-news">
        <span v-if="drawerNodeData" class="node-title">{{
          drawerNodeData.id.replaceAll("_", " ")
        }}</span>
        <div class="chip-for-news">
          <DrawerNewsModale
            :actorName.sync="actorName"
            :filteredNews.sync="filteredNews"
          ></DrawerNewsModale>
        </div>
      </v-list-item>
    </div>
    <div class="content"></div>
  </div>
</v-navigation-drawer>

2. 添加样式规则 #

定义sticky基础样式和激活状态的边框样式：

.sticky_header {
  position: sticky;
  top: 0;
  background-color: #212121; /* 与抽屉背景色一致，避免滚动透底 */
  z-index: 1;
  padding: 16px 0; /* 可根据需求调整内边距 */
}

.sticky-active {
  border-bottom: 1px solid rgba(255, 255, 255, 0.2); /* 适配dark主题的浅色边框 */
}

3. 实现滚动监听逻辑 #

在Vue组件的脚本部分，添加滚动事件监听来判断sticky状态：

export default {
  data() {
    return {
      isStickyActive: false,
      // 保留你原有的数据
      drawerNode: false,
      drawerNodeData: null,
      actorName: '',
      filteredNews: []
    };
  },
  mounted() {
    // 获取抽屉内部的滚动容器（.node-drawer）
    const scrollContainer = this.$el.querySelector('.node-drawer');
    if (scrollContainer) {
      scrollContainer.addEventListener('scroll', this.handleStickyScroll);
      // 初始化时立即检查一次状态
      this.handleStickyScroll();
    }
  },
  beforeUnmount() {
    // 组件销毁前移除监听，避免内存泄漏
    const scrollContainer = this.$el.querySelector('.node-drawer');
    if (scrollContainer) {
      scrollContainer.removeEventListener('scroll', this.handleStickyScroll);
    }
  },
  methods: {
    handleStickyScroll() {
      const stickyHeader = this.$refs.stickyHeader;
      const scrollContainer = this.$el.querySelector('.node-drawer');
      if (!stickyHeader || !scrollContainer) return;

      // 计算头部相对于滚动容器的偏移量，以及容器的滚动距离
      const headerOffset = stickyHeader.offsetTop;
      const scrollTop = scrollContainer.scrollTop;

      // 当滚动距离 >= 头部偏移量时，说明头部进入sticky固定状态
      this.isStickyActive = scrollTop >= headerOffset;
    }
  }
};

原理说明 #

CSS的position: sticky没有原生伪类可以直接检测激活状态，所以我们通过对比滚动容器的scrollTop和头部元素的offsetTop来判断：当滚动距离超过头部在容器内的初始偏移时，头部会切换为固定状态，此时我们给它添加底部边框。

内容的提问来源于stack exchange，提问作者Quentin