vue以及html加css实现吸顶效果

1. vue实现吸顶效果

页面

<div class="main">
<div class="header">
<div>头部展示内容-------------</div>
</div>
<div class="auto_fixed" :class="auto_fixed">自动粘滞固定头部，需要一直展示的</div>
<div class="auto_fixed_fake" :style="{display: auto_fixed.fixed ? 'block':'none'}"></div>
<div class="content">
<div>
中部展示内容，中部展示内容，中部展示内容
</div>
</div>
</div>

data:

data () {
return {
auto_fixed: {
fixed: false
}
}
},

mounted:

mounted(){
this.$nextTick(function () {
window.addEventListener('scroll', this.onScroll)
})
}
}

methods:

methods:{
onScroll(){
let scrolled = document.documentElement.scrollTop || document.body.scrollTop
let header_height = null
if(document.getElementsByClassName('header')[0]){
header_height = document.getElementsByClassName('header')[0].offsetHeight
}
console.log('滚动的距离:'scrolled,'头部的高度:'header_height')
this.auto_fixed = {
auto_fixed: true,
fixed: scrolled >= header_height
}
}
},

css:

.header{
padding: 8px 10px;
}
.auto_fixed{
height: 3em;
background: orange;
line-height: 3em;
text-align: center;
}
.fixed{
position: fixed;
top: 0px;
width: 100%;
}
.content{
color: gray;
padding: 8px;
height:2000px;
}

2. html加css实现吸顶效果

html:

<div style="height:100px;background-color: #ddd;text-align: center;">头部上面内容</div>
<header class="center">头部(我用了粘性定位)</header>
<main class="center">
内容内容内容内容内容内容内容内容内容内容
</main>
<footer class="center">底部底部底部底部底部底部底部底部</footer>

css:

.center{
width: 100%;
text-align: center;
font-size: 18px;
font-weight: bold;
}
header{
height: 60px;
line-height: 60px;
background: powderblue;
/*********重点在这里，**************/
/*Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。Safari 需要使用 -webkit- prefix*/
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
/*指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。*/
}
main{
height: 1800px;
padding-top: 20px;
background: pink;
}
footer{
height: 50px;
line-height: 50px;
background: purple;
}

[ 有兴趣相互学习的小伙伴可以关注我呦 ！]