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
Today I have nothing to do, so I listed some tool...
animation-name animation name, can have multiple ...
This article uses examples to describe the add, d...
Automated project deployment is more commonly use...
MySQL is a multi-user managed database that can a...
To achieve the following goals: Mysql database wi...
Table of contents Preface Core - CancelToken Prac...
Using UNION Most SQL queries consist of a single ...
Table of contents 1. The concept of closure Addit...
When the created tab label exceeds the visible ar...
1. Download the software 1. Go to the MySQL offic...
Table of contents Preface Introduction ngram full...
Today we will implement a fragmented image loadin...
1 Download MySQL8 from the official website and i...
Effect There are currently 2 projects (project1, ...