html:
<div class="pc_header">
<header :class="{ 'sticky': isSticky }">
<div class="logo"></div>
<ul>
<li><a @click="navJump(1)">首页</a></li>
<li class="drop_down"><a @click="navJump(2)">平台信息</a>
<div class="down_box">
<ul class="options">
<li><a>方案</a></li>
<li><a>方案</a></li>
<li><a>方案</a></li>
<li><a>方案</a></li>
</ul>
</div>
</li>
<li><a @click="navJump(3)">业务体系</a></li>
<li><a @click="navJump(4)">发展规划</a></li>
<li><a @click="navJump(5)">工作台</a></li>
</ul>
</header>
</div>
JS:
<script>
export default {
data() {
return {
isSticky: false,
}
},
mounted() {
window.addEventListener("scroll", this.handleScroll);
},
beforeDestroy() {
window.removeEventListener("scroll", this.handleScroll);
},
methods: {
// 监听滚轮事件
handleScroll() {
this.isSticky = window.scrollY > 0;
}
}
}
</script>
CSS:
/* 吸顶效果css */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
word-wrap: break-word;
font-family: '微软雅黑', sans-serif;
}
header {
position: fixed;
top: 40px;
left: 0;
width: 100%;
display: flex;
justify-content: space-between;
padding: 30px 150px;
z-index: 999;
transition: 0.6s;
align-items: center;
}
header.sticky {
padding: 10px 150px;
background-color: #fff;
top: 0;
align-items: center;
}
/* 下拉css */
header .logo {
position: relative;
transition: 0;
width: 150px;
height: 39px;
background-image: url('@/static/images/logo.png');
background-repeat: no-repeat;
background-size: 100% 100%;
}
header ul {
position: relative;
display: flex;
justify-content: center;
}
header ul li {
position: relative;
list-style: none;
}
header ul li a {
position: relative;
margin: 0 20px;
text-decoration: none;
color: #000;
letter-spacing: 2px;
font-weight: 500;
cursor: pointer;
transition: 0.3s;
}
header ul li a:hover {
color: rgb(114, 114, 114);
transition: 0.3s;
}
header.sticky .logo,
header.sticky ul li a {
color: #000;
}
.menu img {
width: 35px;
height: 35px;
}
.menu_list {
margin-left: 20px;
}
.menu_list li {
line-height: 40px;
list-style: none;
cursor: pointer;
}
@media screen and (max-width: 965px) {
.pc_header {
transition: opacity 1s ease-in-out;
display: none;
}
header {
padding: 10px 27px;
}
header.sticky {
padding: 10px 27px;
}
header .logo {
width: 100px;
height: 27px;
}
}
@media screen and (min-width: 965px) {
.phone_header {
display: none;
transition: opacity 1s ease-in-out;
}
}
.drop_down {
position: relative;
}
.down_box {
position: absolute;
top: 40px;
left: 50%;
transform: translateX(-50%);
width: 250px;
height: 0px;
overflow: hidden;
transition: all 0.4s;
background-color: aqua;
.options {
display: block !important;
}
}
.drop_down:hover .down_box {
height: 200px;
}