粘性布局sticky - h5标签，有兼容性问题
/* sticky布局要单独设置，跟其他属性写在一起会失效 */
.red {
position: -webkit-sticky;
position: sticky;
top: 0;
}
.red {
width: 100%;
height: 100px;
background-color: pink;
}
.green {
width: 100%;
height: 700px;
background-color: yellow;
}
<body>
<div class="red"></div>
<div class="green"></div>
</body>原生JS实现
先使用js中获取进度条位置的属性scrollTop，兼容写法为：
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop调用窗口滚动对象window.onscroll事件。当滚动页面的滚动条时会触发scroll里的事件方法。
建立判断条件，如果页面滚动的值超过导航栏的高度navHeight时，将导航栏的position属性值改为fixed，top值可以设置为0px。当页面回到顶端时，需要再次显示为原来默认的状态，所以把导航栏的position值改为默认的static。
<style>
.red {
width: 100%;
height: 100px;
background-color: pink;
}
.green {
width: 100%;
height: 700px;
background-color: yellow;
}
</style>
<template>
<div class="red"></div>
<div class="green">
<p>内容区域</p>
</div>
</template>
<script>
window.onscroll = function () {
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop
var red = document.querySelector('.red')
if (scrollTop >= 100) {
red.style.position = 'fixed'
red.style.top = '0'
} else {
red.style.position = 'static'
}
}
</script> 
扫一扫
748
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
