代码实例：
<style>
* {
padding: 0;
margin: 0;
}
.navbar {
line-height: 80px;
text-align: center;
background: pink;
position: fixed;
width: 100%;
left: 0;
top: 0;
}
.content {
height: 2000px;
}
</style>
<div id="app">
<div class="navbar" :style="filter">导航</div>
<div class="content">
</div>
</div>
<script>
new Vue({
el: "#app",
data: {
filter: {
opacity: 0
}
},
mounted() {
var self = this;
window.onscroll = function () {
var top = document.documentElement.scrollTop;
/* console.log(top); */
var opacity = top / 200;
if (opacity >= 1) {
opacity = 1;
}
self.filter.opacity = opacity;
}
},
})
</script>
