顶部滚动固定及鼠标移入替换图片

顶部滚动固定

• 监听页面滚动距离，控制js变量== 注意this的指向 ==
• 使用js变量控制导航栏的显示隐藏（此处两个导航栏样式不一样）
• 导航栏使用fixed固定定位会脱离文档流，使用sticky粘性布局不会脱离文档流
• 如果导航栏需要占位就用粘性布局

.sticky {
  position: sticky; /* 设置 position 为 sticky */
  top: 0px; /* 设置 top、right、bottom、left 属性中的至少一个 */
  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>

鼠标移入替换图片

• 使用鼠标移入移出事件控制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;
}