<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style type="text/css">
/*GLOBALS*/
HTML, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote,
pre, form, fieldset, table, th, td {
border:none;
font-family:"微软雅黑","黑体","宋体";
font-size:14px;
margin:0px;
padding:0px;
}
html,body{
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div id="app" v-show="navtab" style="width: 500px; height: 50px; background-color: #00AEF3; position: fixed; top: 0;">
1
</div>
<div class="y1" style="width: 500px; height: 2000px; background-color: #000000; margin-top: -20px;">
2
</div>
</body>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
navtab: false,
},
mounted () {
window.addEventListener('scroll', this.handleScroll)
},
methods: {
handleScroll(){
var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
if(scrollTop > 150){
this.navtab = true;
}else if (scrollTop < 150) {
this.navtab = false;
}
}
}
})
</script>
</html>
1372
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
