【Vue3】E-commerce website ceiling function

Head Category Navigation - Ceiling Function

The homepage of the e-commerce website will have more content and longer pages, in order to allow users to quickly switch to other categories while scrolling through the content. Category navigation needs to be always visible, so a ceiling navigation effect is needed.

Goal: Complete the realization of the ceiling effect of the head component

interaction requirements

1. When the scroll distance is greater than or equal to 78 px, the component will be fixed at the top
2. When the scroll distance is less than 78 px, the component disappears and hides

Implementation ideas

1. Prepare a ceiling component, prepare a class name, control display and hide
2. Monitor page scrolling, judge the scrolling distance, and add a class name if the distance is greater than 78px

Core code:

(1) Create a new ceiling navigation componentsrc/Layout/components/app-header-sticky.vue

<script lang="ts" setup name="AppHeaderSticky">
import AppHeaderNav from './app-header-nav.vue'
</script>

<template>
  <div class="app-header-sticky">
    <div class="container">
      <RouterLink class="logo" to="/" />
      <AppHeaderNav />
      <div class="right">
        <RouterLink to="/">品牌</RouterLink>
        <RouterLink to="/">专题</RouterLink>
      </div>
    </div>
  </div>
</template>

<style scoped lang="less">
.app-header-sticky {
    
    
  width: 100%;
  height: 80px;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 999;
  background-color: #fff;
  border-bottom: 1px solid #e4e4e4;
  .container {
    
    
    display: flex;
    align-items: center;
  }
  .logo {
    
    
    width: 200px;
    height: 80px;
    background: url(@/assets/images/logo.png) no-repeat right 2px;
    background-size: 160px auto;
  }
  .right {
    
    
    width: 220px;
    display: flex;
    text-align: center;
    padding-left: 40px;
    border-left: 2px solid @xtxColor;
    a {
    
    
      width: 38px;
      margin-right: 40px;
      font-size: 16px;
      line-height: 1;
      &:hover {
    
    
        color: @xtxColor;
      }
    }
  }
}
</style>

(2) The Layout home page introduces the ceiling navigation component

<script lang="ts" setup>
import AppTopnav from './components/app-topnav.vue'
import AppHeader from './components/app-header.vue'
import AppFooter from './components/app-footer.vue'
+import AppHeaderSticky from './components/app-header-sticky.vue'
</script>
<template>
  <AppTopnav></AppTopnav>
  <AppHeader></AppHeader>
+  <AppHeaderSticky></AppHeaderSticky>
  <div class="app-body">
    <!-- 路由出口 -->
    <RouterView></RouterView>
  </div>
  <AppFooter></AppFooter>
</template>

<style lang="less" scoped>
.app-body {
    
    
  min-height: 600px;
}
</style>

(3) Provide styles to control the display and hiding of sticky

.app-header-sticky {
    
    
  width: 100%;
  height: 80px;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 999;
  background-color: #fff;
  border-bottom: 1px solid #e4e4e4;
+  transform: translateY(-100%);
+  &.show {
    
    
+    transition: all 0.3s linear;
+    transform: translateY(0%);
+  }

(4) Register the scroll event for the window to get the scrolling distance

<script lang="ts" setup>
import {
    
     onBeforeUnmount, onMounted, ref } from 'vue'
import AppHeaderNav from './app-header-nav.vue'
const y = ref(0)
const onScroll = () => {
    
    
  y.value = document.documentElement.scrollTop
}
onMounted(() => {
    
    
  window.addEventListener('scroll', onScroll)
})
onBeforeUnmount(() => {
    
    
  window.removeEventListener('scroll', onScroll)
})
</script>

(5) Control the display and hiding of sticky

 <div class="app-header-sticky" :class="{show:y >= 78}">

(6) Fix the bug, so that the content of the ceiling head does not cover the non-ceiling head.

<div class="container" v-show="y >= 78">

You can also use 185px, just when all the original headers disappear to show the ceiling header

Head Category Navigation - Ceiling Reconstruction

vueuse/core : A collection of common reuse logic for combined APIs

Goal: Use vueuse/core to refactor the ceiling function

core steps

(1) Install the @vueuse/core package, which encapsulates some common interactive logic

yarn add @vueuse/core

(2) Used in ceiling navigation

src/components/app-header-sticky.vue

<script lang="ts" setup>
import AppHeaderNav from './app-header-nav.vue'
// import { onBeforeUnmount, onMounted, ref } from 'vue'
import {
    
     useWindowScroll } from '@vueuse/core'
// const y = ref(0)
// const onScroll = () => {
    
    
//   y.value = document.documentElement.scrollTop
// }
// onMounted(() => {
    
    
//   window.addEventListener('scroll', onScroll)
// })
// onBeforeUnmount(() => {
    
    
//   window.removeEventListener('scroll', onScroll)
// })
// 控制是否显示吸顶组件
const {
    
     y } = useWindowScroll()
</script>