vue3使用锚点距离顶部100px

在 Vue3 中，如果你想创建一个元素，并让它总是位于页面顶部，距离浏览器窗口顶部100像素，你可以通过JavaScript操作DOM或者使用Vue的生命周期钩子结合CSS来实现。这里是一个简单的示例：

首先，在HTML模板中添加一个`<div>`并设置它的`id`，例如：

<div id="top-anchor" ref="anchor"></div>

然后，在对应的Vue组件中，你可以这样做：

export default {
  setup() {
    const $anchor = ref(null); // 使用ref来存储DOM节点

    onMounted(() => {
      $anchor.value = document.getElementById('top-anchor');
      if ($anchor.value) {
        const initialTop = $anchor.value.getBoundingClientRect().top + window.scrollY; // 获取元素初始位置
        $anchor.value.style.position = 'fixed'; // 设置固定定位
        $anchor.value.style.top = `${initialTop - 100}px`; // 距离顶部100px
      }
    });

    return { $anchor };
  },
}

在这个例子中，`onMounted`钩子会在组件挂载完成后运行，获取到元素的位置并将它固定在顶部，并调整其上边距使其始终距离顶部100px。