Encapsulate a navigation bar component in Vue3, and realize a ceiling effect as the scroll bar scrolls, for your reference The effect diagram of the navigation bar component: Schematic diagram of the ceiling effect after the scroll bar is scrolled: Specific code display: <template> <header class="app-header"> <div class="container"> <!-- Header navigation area --> <HeaderNavCommon /> <div class="search"> <i class="iconfont icon-search"></i> <input type="text" placeholder="Search" /> </div> <div class="cart"> <a href="#" class="curr"> <i class="iconfont icon-cart"></i> <em>2</em> </a> </div> </div> </header> </template> <script> import HeaderNavCommon from '@/components/header-nav-common.vue' export default { name: 'AppHeader', components: HeaderNavCommon } } </script> <style scoped lang="less"> .app-header { background: #fff; .container { display: flex; align-items: center; } .navs { width: 820px; display: flex; justify-content: space-around; padding-left: 40px; li { margin-right: 40px; width: 38px; text-align: center; a { display: inline-block; font-size: 16px; line-height: 32px; height: 32px; } &:hover { a { color: @xtxColor; border-bottom: 1px solid @xtxColor; } } } } .search { width: 170px; height: 32px; position: relative; border-bottom: 1px solid #e7e7e7; line-height: 32px; .icon-search { font-size: 18px; margin-left: 5px; } input { width: 140px; padding-left: 5px; color: #666; } } .cart { width: 50px; .curr { height: 32px; line-height: 32px; text-align: center; position: relative; display: block; .icon-cart { font-size: 22px; } em { font-style: normal; position: absolute; right: 0; top: 0; padding: 1px 6px; line-height: 1; background: @helpColor; color: #fff; font-size: 12px; border-radius: 10px; font-family: Arial; } } } } </style> The middle menu department is encapsulated in a separate component to achieve the reuse of two components (HeaderNavCommon component) <template> <ul class="app-header-nav"> <li class="home"><RouterLink to="/">Home</RouterLink></li> <li><a href="#" >Delicious food</a></li> <li><a href="#" >Kitchen</a></li> <li><a href="#" >Art</a></li> <li><a href="#" >Electrical appliances</a></li> <li><a href="#" >Home</a></li> <li><a href="#" >Care</a></li> <li><a href="#" >Pregnancy and Infant</a></li> <li><a href="#" >Clothing</a></li> <li><a href="#" >Groceries</a></li> </ul> </template> <script> export default { name: 'AppHeaderNav' } </script> <style scoped lang='less'> .app-header-nav { width: 820px; display: flex; padding-left: 40px; position: relative; z-index: 998; li { margin-right: 40px; width: 38px; text-align: center; a { font-size: 16px; line-height: 32px; height: 32px; display: inline-block; } &:hover { a { color: @xtxColor; border-bottom: 1px solid @xtxColor; } } } } </style> Components for encapsulating ceiling effects <template> <div class="app-header-sticky" :class="{ show: top >= 78 }"> <div class="container" v-if="top >= 78"> <!-- Middle --> <HeaderNavCommon /> <!-- Right button --> <div class="right"> <RouterLink to="/">Brand</RouterLink> <RouterLink to="/">Topic</RouterLink> </div> </div> </div> </template> <script> import HeaderNavCommon from '@/components/header-nav-common.vue' // import { ref } from 'vue' import { useWindowScroll } from '@vueuse/core' export default { name: 'AppHeaderSticky', components: { HeaderNavCommon }, setup() { // Page scroll distance // const top = ref(0) // window.onscroll = () => { // top.value = document.documentElement.scrollTop // } // Page scrolling using third-party packages const { y: top } = useWindowScroll() return { top } } } </script> <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; // This is the key style!!! // By default, move yourself completely to the top transform: translateY(-100%); // Completely transparent opacity: 0; //Displayed class name&.show { transition: all 0.3s linear; transform: none; opacity: 1; } .container { display: flex; align-items: center; } .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> The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM. You may also be interested in:
|
<<: Implementation of LNMP for separate deployment of Docker containers
>>: Solution to MySQL root password error number 1045
nginx Overview nginx is a free, open source, high...
Preface During project development, due to differ...
1. Problem description <br />When JS is use...
When the Docker container exits, the file system ...
Because I want the virtual machine to have its ow...
Table name and fields –1. Student List Student (s...
1. Download MySQL from the official website: This...
This article shares the specific code of NodeJS t...
This article shares the specific code of js imita...
All content in this blog is licensed under Creati...
It is troublesome to install the db2 database dir...
Table of contents What is a skeleton screen? Demo...
/etc/fstab Automatically mount partitions/disks, ...
Overview Nginx can use variables to simplify conf...
Table of contents Preface interface type Appendix...