关于c-s-s:组件吸顶
次要是通过浏览器事件监听函数，判断间隔顶部的高度，是否合乎吸顶，利用动静class属性设置款式~ window.pageYOffset：间隔顶部偏移量document.documentElement.scrollTop：谷歌浏览器获取滚动条间隔顶部的地位document.body.scrollTop：ie浏览器获取滚动条间隔顶部的地位<template> <div class="wrapper"> <div class="nav-bar" :class="{'is_fixed':isFixed}"> 这是内容 </div> <div class="scroll"> 这是滚动内容 </div> </div></template><script> export default{ name:'nav-var', data(){ return{ isFixed:false } }, mounted(){ window.addEventListener('scroll',this.initHeight) }, methods:{ initHeight(){ let scollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop this.isFixed = scollTop > 152 ? true : false; } }, destroyed(){ window.removeEventListener('scroll',this.initHeight,false) } }</script><style lang="scss">.wrapper{ .nav-bar{ height:70px; line-height: 70px; border-top:1px solid gray; background: #ffffff; &.is_fixed{ position: fixed; top:0; width:100%; box-shadow: 0 5px 5px #cccccc; } } .scroll{ height:500px; }}</style>