顶部滚动固定
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/7b02ab90a2e61f13feccb23de8a1e416.png)
- 监听页面滚动距离,控制js变量== 注意this的指向 ==
- 使用js变量控制导航栏的显示隐藏(此处两个导航栏样式不一样)
- 导航栏使用fixed固定定位会脱离文档流,使用sticky粘性布局不会脱离文档流
- 如果导航栏需要占位就用粘性布局
.sticky {
position: sticky;
top: 0px;
z-index: 999;
}
mounted() {
let _this = this;
window.onscroll = function () {
console.log(document.documentElement.scrollTop);
if (document.documentElement.scrollTop > 100) {
_this.scroll = true;
} else {
_this.scroll = false;
}
};
},
<div class="index-top">
<!-- 导航 -->
<div v-if="!scroll" class="nav w flex white" style="height: 92px">
<div class="flex_l">
<img src="~assets/img/logo-1.png" style="height: 66px" alt="" />
<p class="ml-30 size-24">迈特望职业教育平台</p>
</div>
<div>
<nuxt-link to="/" class="active">首页</nuxt-link>
<nuxt-link to="/introduce">中心介绍</nuxt-link>
<nuxt-link to="/enrollment">招生信息</nuxt-link>
<nuxt-link to="/course">课程中心</nuxt-link>
<nuxt-link to="/student">学生风采</nuxt-link>
<nuxt-link to="/employ">名企招聘</nuxt-link>
</div>
</div>
<Nav v-else style="z-index: 9999; position: fixed; top: 0"></Nav>
</div>
鼠标移入替换图片
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/1652a35035afd038e5b0c53560f1842d.png)
- 使用鼠标移入移出事件控制js变量
- 用js变量控制图片及字体显色的显示隐藏
<!-- 悬浮框-->
<div class="suspension">
<div
class="text-center pt-14 bb"
style="width: 80px; height: 80px; display: block"
@mouseenter="mouseenter(1)"
@mouseleave="mouseleave()"
@click="$router.push('/grade')"
>
<img
v-if="active == 1"
src="~assets/img/right-11.png"
alt=""
style="width: 24px; height: 24px"
/>
<img
v-else
src="~assets/img/right-1.png"
alt=""
style="width: 24px; height: 24px"
/>
<p :class="[active == 1 ? 'blue' : 'gray-1', 'size-12']">成绩查询</p>
</div>
<div
class="text-center pt-14 bb"
style="width: 80px; height: 80px; display: block"
@mouseenter="mouseenter(2)"
@mouseleave="mouseleave()"
>
<img
v-if="active == 2"
src="~assets/img/right-22.png"
alt=""
style="width: 24px; height: 24px"
/>
<img
v-else
src="~assets/img/right-2.png"
alt=""
style="width: 24px; height: 24px"
/>
<p :class="[active == 2 ? 'blue' : 'gray-1', 'size-12']">关注公众号</p>
</div>
<div
class="text-center pt-14 bb"
style="width: 80px; height: 80px; display: block"
@mouseenter="mouseenter(3)"
@mouseleave="mouseleave()"
@click="$router.push('/apply')"
>
<img
v-if="active == 3"
src="~assets/img/right-33.png"
alt=""
style="width: 24px; height: 24px"
/>
<img
v-else
src="~assets/img/right-3.png"
alt=""
style="width: 24px; height: 24px"
/>
<p :class="[active == 3 ? 'blue' : 'gray-1', 'size-12']">报名</p>
</div>
<div
class="text-center pt-14 bb"
style="width: 80px; height: 80px; display: block"
@mouseenter="mouseenter(4)"
@mouseleave="mouseleave()"
v-if="$route.path == '/enrollment'"
>
<img
v-if="active == 4"
src="~assets/img/right-44.png"
alt=""
style="width: 24px; height: 24px"
/>
<img
v-else
src="~assets/img/right-4.png"
alt=""
style="width: 24px; height: 24px"
/>
<p :class="[active == 4 ? 'blue' : 'gray-1', 'size-12']">支付</p>
</div>
</div>
<!-- 公众号。支付 -->
<img
src="~assets/img/pay.jpg"
style="width: 300px; right: 80px; bottom: 30%; z-index: 9999"
class="fixed"
alt=""
v-if="active == 4"
@mouseenter="mouseenter(4)"
@mouseleave="mouseleave()"
/>
<img
src="~assets/img/pay.jpg"
style="width: 150px; right: 80px; top: 40%; z-index: 9999"
class="fixed"
alt=""
v-if="active == 2"
@mouseenter="mouseenter(2)"
@mouseleave="mouseleave()"
/>
mouseenter(id) {
this.active = id;
},
mouseleave() {
this.active = null;
},
.suspension {
position: fixed;
right: 0;
bottom: 30%;
background: rgba(255, 255, 255, 1);
box-shadow: -4px 2px 8px rgba(0, 0, 0, 0.1);
border-radius: 4px, 0px, 0px, 4px;
width: 80px;
z-index: 9999;
}