<template> <div class="menu" ref="nav" :class="{ fixed_menu: isFixed }"> </div> </template><script setup lang="ts"> import { reactive, ref, onMounted, onBeforeUnmount } from "vue"; const nav = ref(null); const isFixed = ref(false); const handleScroll = () => { const { top } = nav.value.getBoundingClientRect(); console.log(top, "top"); if (top <= 0) { isFixed.value = true; } else if (top === 0) { isFixed.value = false; } else { isFixed.value = false; } }; onMounted(() => { window.addEventListener("scroll", handleScroll); });<style lang="scss" scoped> </script>.menu { width: 100%; display: flex; height: 95px; background: #f6f7fa; color: #6c7088; padding-left: 264px; border-bottom: 1px solid rgb(222, 223, 228);} .fixed_menu { position: fixed; top: 0; background: rgba(246, 247, 250, 0.7); backdrop-filter: blur(20px); } onBeforeUnmount(() => { window.removeEventListener("scroll", handleScroll); });</style> 当我滚到页面顶部时，导航栏为什么还在最顶部

根据你提供的代码，当滚动到页面顶部时，导航栏应该会变成固定定位（position: fixed），但是因为你的代码中判断条件有一个是 `else if (top === 0)`，所以当导航栏恰好在页面顶部时，它的位置不会被固定，而是保持原有的位置。如果你想要让导航栏在页面顶部也变成固定定位，可以将判断条件修改为 `if (top <= 0)`，这样当导航栏在页面顶部时，它的位置也会被固定。

相关问题

<template> <div class="layout"> <h1>布局</h1> </div> </template>显示“布局”不成功

可能是因为在引用中提供的代码中，没有在`<script setup>`标签中将`name`属性与`defineProps`一起使用。在Vue 3中，`name`属性必须与`defineProps`一起使用，以便在模板中使用组件名称。以下是一个示例代码，可以在`<script setup>`标签中使用`defineProps`和`name`属性来解决这个问题：

<template>
  <div class="layout">
    <h1>{{ title }}</h1>
  </div>
</template>

<script setup lang="ts">
import { defineProps } from 'vue';

const props = defineProps({
  title: {
    type: String,
    default: '布局'
  }
});

const name = 'Layout';
</script>

<style scoped>
.layout {
  background-color: #f0f0f0;
  padding: 20px;
}
</style>

<template> <div class="contact-us-container"> <h1>联系我们</h1> <div class="form-group"> <label style="text-align: center">Name:</label> <span style="text-align: center">{{name}}</span> </div> <div class="form-group"> <label style="text-align: center">Email:</label> <span >{{email}}</span> </div> <div class="form-group"> <label>Message:</label> <span >{{message}}</span> </div> </div> </template>把这个样式调好看

<>
<div class="contact-us-container">
<h1>联系我们</h1>
<div class="form-group">
<label>姓名:</label>
<span>{{name}}</span>
</div>
<div class="form-group">
<label>邮箱:</label>
<span>{{email}}</span>
</div>
<div class="form-group">
<label>留言:</label>
<span>{{message}}</span>
</div>
</div>
</template>

<style>
.contact-us-container {
display: flex;
flex-direction: column;
align-items: center;
}
h1 {
font-size: 2rem;
margin-bottom: 2rem;
}
.form-group {
margin-bottom: 1rem;
display: flex;
flex-direction: column;
align-items: center;
}
label {
font-size: 1.2rem;
margin-bottom: 0.5rem;
}
span {
font-size: 1.2rem;
padding: 0.5rem;
border: 1px solid #ccc;
border-radius: 5px;
min-width: 300px;
text-align: center;
}
</style>